Angular2动态更改CSS属性

13 浏览
0 Comments

Angular2动态更改CSS属性

我们正在制作一个 Angular2 应用程序，并希望能够以某种方式创建全局 CSS 变量（并在分配变量时更新属性的值）。我们之前使用过 Polymer（现在我们正在切换到 Angular2 组件），我们使用了 CSS 属性（Polymer 有一些 polyfill），并且我们只是使用 Polymer.updateStyles() 来更新样式。有没有办法实现类似的功能呢？

编辑：

我们希望类似于 Sass 的 color: $g-main-color 或 CSS 自定义属性的 color: var(--g-main-color)，并且每当我们决定更改属性的值时，例如像 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 }} }

0