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 }} } 

Answer 1

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

Answer 2

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

 @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教程。

Answer 3

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

在这里，我从父组件获取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 {}