javascript - Angular2动态改变CSS属性

Question

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

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

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

编辑:

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

编辑 2:

我想在我的 CSS 的不同部分(主机、子元素...)中使用一些全局 CSS 变量，并且能够立即更改值 - 所以如果我更改 my-color 变量，它会在应用程序中随处更改。

我将使用 Sass 语法作为例子:

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

是否可以使用 Angular 管道之类的东西？ (但据说它只适用于 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