相关疑难解决方法(0)

我们正在制作一个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的不同部分(host,child element ...)中使用一些全局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 }} }

在我的 angular 项目中，我在这样的顶级styles.scss文件中定义了一些 css 变量。我在很多地方使用这些变量来保持整个主题的一致性。

:root {
  --theme-color-1: #f7f7f7;
  --theme-color-2: #ec4d3b;
  --theme-color-3: #ffc107;
  --theme-color-4: #686250;

  --font-weight: 300
}

如何从app.component.ts动态更新这些变量的值？在 angular 中做到这一点的干净方法是什么？

我正在使用Angular 6，我有一个简单的方法div，想div从模板内部设置它的背景色。通过正常颜色时，此方法效果很好。但这不适用于CSS变量。

这个例子有效

<div [style.background]="'red'">...</div>

这个例子不起作用

<div [style.background]="'var(--some-css-var)'">...</div>