Angular2动态改变CSS属性

我们正在制作一个Angular2应用程序我们希望能够以某种方式创建一个全局 CSS 变量（并在分配变量时更新属性值）。

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

有什么办法可以实现类似的功能吗？

EDIT:

我们想要类似 Sass 的东西color: $g-main-color或 CSS 自定义属性color: var(--g-main-color)每当我们决定改变财产的价值时，例如就像是updateVariable('g-main-color', '#112a4f')它动态地更新各处的值。所有这一切都是在应用程序运行时进行的。

EDIT 2:

我想在 CSS 的不同部分（主机、子元素...）使用一些全局 CSS 变量，并且能够立即更改值 - 因此，如果我更改 my-color 变量，它会在应用程序中的所有位置发生变化。

我将使用 Sass 语法，例如：

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

可以使用像角管这样的东西吗？（但据说它只适用于 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 https://angular.io/cheatsheet

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