Angular2dynamic更改CSS属性

我们正在制作一个Angular2应用程序 ,我们希望能够以某种方式创build一个全局的CSSvariables(并在variables被赋值时随时更新属性值)。

我们已经使用了Polymer一段时间(现在我们正在切换到Angular2组件),并且我们使用了CSS属性(Polymer有一些polyfill),我们刚刚使用Polymer.updateStyles()更新了样式。

有什么办法可以实现类似的function吗?

编辑:

我们需要类似于Sass的color: $g-main-color或者CSS自定义属性color: var(--g-main-color)并且每当我们决定改变属性的值时,比如updateVariable('g-main-color', '#112a4f')它dynamic地更新每个地方的值。 所有这一切,而应用程序正在运行。

编辑2:

我想在我的CSS的不同部分(主机,子元素…)使用一些全局CSSvariables,并能够立即更改值 – 所以如果我更改我的颜色variables,它会改变应用程序中的任何地方。

例如,我将使用Sass语法:

 :host { border: 2px solid $my-color } :host .some-label { color: $my-color } 

有可能使用像angularpipe? (但它应该只能用于HTML)

 :host { border: 2px solid {{ 'my-color' | cssvariable }} } :host .some-label { color: {{ 'my-color' | cssvariable }} } 

1)使用内联样式

 <div [style.color]="myDynamicColor"> 

2)使用多个CSS类映射到你想要的和切换类如下:

  /* CSS */ .theme { /* any shared styles */ } .theme.blue { color: blue; } .theme.red { color: red; } /* Template */ <div class="theme" [ngClass]="{blue: isBlue, red: isRed}"> <div class="theme" [class.blue]="isBlue"> 

代码示例来自: https : //angular.io/cheatsheet

有关ngClass指令的更多信息: https ://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

你没有任何示例代码,但我认为你想要做这样的事情?

 @View({ directives: [NgClass], styles: [` .${TodoModel.COMPLETED} { text-decoration: line-through; } .${TodoModel.STARTED} { color: green; } `], template: `<div> <span [ng-class]="todo.status" >{{todo.title}}</span> <button (click)="todo.toggle()" >Toggle status</button> </div>` }) 

您可以将ng-class赋值给一个dynamicvariables(您可以猜到,这是一个名为TodoModel的模型的属性)。

todo.toggle()正在改变todo.status的值,那里的input类正在改变。

这是一个类名的例子,但实际上你可以做同样的想法的CSS属性。

我希望这是你的意思。

这个例子是在这里的伟大的egghead教程。

我做了这个探险 ,探索一种方法来做你想做的事情。

在这里,我从父组件获取mystyle ,但是您可以从服务中获取它。

 import {Component, View} from 'angular2/angular2' @Component({ selector: '[my-person]', inputs: [ 'name', 'mystyle: customstyle' ], host: { '[style.backgroundColor]': 'mystyle.backgroundColor' } }) @View({ template: `My Person Component: {{ name }}` }) export class Person {}