在 angular 中动态更改 css 个变量

Question

在我的 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 中，干净的方法 是什么？

Answer 1

您可以使用

更新它们

 document.documentElement.style.setProperty('--theme-color-1', '#fff');

如果你想更新很多值，那么创建一个对象

 this.styles = [
      { name: 'primary-dark-5', value: "#111" },
      { name: 'primary-dark-7_5', value: "#fff" },
    ];

 this.styles.forEach(data => {
      document.documentElement.style.setProperty(`--${data.name}`, data.value);
 });

这里最主要的是document.documentElement.style.setProperty。此行允许您访问根元素（HTML 标记）和 assigns/overrides 样式值。

注意变量的名称应该在两个地方匹配（css和js文件）

如果您不想使用文档 API，那么您可以直接在 HTML 标签上使用内联样式

    const styleObject = {};

    this.styles.forEach(data => {
      styleObject[`--${data.name}`] = data.value;
    });

然后在您的模板文件中使用 ngStyle (https://angular.io/api/common/NgStyle)

Set a collection of style values using an expression that returns key-value pairs.
<some-element [ngStyle]="objExp">...</some-element>

<html [ngStyle]="styleObject" >...</html>  //not sure about quotes syntax

以上方法做同样的事情，“更新根元素值”，但方式不同。

当您使用 :root 时，样式会自动附加到 HTML 标签

Answer 2

从 Angular v9 开始，您可以使用样式绑定更改自定义值属性

<app-component-name [style.--theme-color-1="'#CCC'"></app-component-name>

在 angular 中动态更改 css 个变量

Change css variables dynamically in angular

css

typescript

css-variables

angular