生成动态CSS 4

我的工作与角4开发的管理面板上，并试图整合部分定制造型样改变颜色，BG等我已经开发了部分保存在数据库设置使用API将它们作为json加载应用程序。生成动态CSS 4

现在我试图使用从JSON值动态CSS，我与主要成分下面的代码，但它不工作

@Component({ 
     templateUrl: 'card.html', 
     styles: [` 
     .card { 
      height: 70px; 
      width: 100px; 
      color: {{css.cardColor}}; 
     } 
     `], 
})

试过我不知道我应该如何在组件加载CSS值并在样式标签中使用它们。我没有找到任何其他解决方案相同。

另一种方法是使用角动画的概念，但CSS将是巨大的，它不可能通过使用触发器和所有角动画来实现它。我相信有一个解决方案，因为它似乎是一个真正的需求，应该由许多其他开发人员完成。

任何帮助是可观的。

编辑：不能使用ngStyle，因为它将被应用于几乎所有的元素，因为它的整个应用程序，而不仅仅是特定的元素。

来源

2017-09-05 Vikram Singh

通过不同的方法去后，接近动态CSS增加对角应用程序，我结束了以下解决方案的所有网页。

要求：基于来自与API返回改变设计和造型值生成动态CSS。

解决方案：

创建一个新的组件和创建服务从API加载动态的CSS变量。在模板文件
添加样式标签和使用的变量值的属性。
在所有页面或主模板上加载此模板。
在应用程序构建样式将被移动到头标签。

代码示例

import { CssService} from './Css.service'; 

@Component({ 
    selector: 'DynamicCss', 
    templateUrl: './DynamicCss.component.html', 
    styleUrls: ['./DynamicCss.component.scss'] 
}) 
export class ServiceProviderComponent implements OnInit { 
    cssVariables: any; 
    constructor(private cssService:CssService){ 
     /* call the service/api to get the css variable values in cssVariables */ 

    } 
}

模板

<style> 
.css_class{ 
    background: {{cssVariables.bgcolor}}; 
    color: {{cssVariables.fontcolor}}; 
} 
</style>

来源

2017-10-03 02:47:55

您应该在此处发布代码解决方案。你能告诉我们如何使用CSS样式属性中的变量值吗？ –

你能发表一些这个解决方案的代码示例吗？这看起来是一个非常好的解决方案。 – Neutrino

更新了代码 –

你可以使用ngStyle以dyanaically的方式将css添加到json的页面。

<div [ngStyle]="{'color': variable ? 'red' : 'blue'}"></div>

An的相同另一示例可以是

<div md-card-avatar [ngStyle]="{'background-image': 'url(' + post.avatar + ')', 'background-size': 'cover' }"></div>

在这里，我已经从JSON加载背景图像

来源

2017-09-05 05:28:16

那是一个很好的建议，但Ajinkya正如我所提到它的将是一个巨大的CSS和将被应用到几乎每一个元素。所以不能使用ngStyle –

@Vikram，这个问题已经提交[https://github.com/angular/angular/issues/7108](https://github.com/angular/angular/issues/7108 ）也有一些建议，这可能对您有所帮助 –

ngClass是使用来设置变量值的动态类基础如下

Ts File Component 
    @Component ({ 
      selector:'simple-comp', 
      template:` <ol class="breadcrumb"> 
     <li *ngClass="{'active': step==='step1'}" (click)="step='step1; '">Step1</li> 
     <li *ngClass="{'active': step==='step2'}" (click)="step='step2'">Step2</li> 
     <li *ngClass="{'active': step==='step3'}" (click)="step='step3'">Step3</li> 
     </ol>` 
     }) 
    export class SimpleComponent { 
    public step: string = 'step1'; // change value like step1, step2, step3 
    }

参考angular.io：https://angular.io/api/common/NgClass

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

来源

2017-09-05 05:37:29

只能绑定“style.color”

<div class="card" [style.color]=cardColor>lorem ipsum</div>

来源

2017-09-05 06:37:05 Eliseo

回答

相关问题