以角度动态更改css变量答案

【问题标题】：Change css variables dynamically in angular以角度动态更改css变量
【发布时间】：2020-07-26 14:33:29
【问题描述】：

在我的 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 动态更新这些变量的值？什么是干净的方式在角度做到这一点？

【问题讨论】：

这可能会有所帮助：stackoverflow.com/a/66244720/1974681
stackoverflow.com/a/68089667/9649530 中详述的解决方案对我有用。类似于以下一些答案，但在 HTML 中完成工作。

标签： css angular typescript css-variables

【解决方案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 标记）并分配/覆盖样式值。

请注意，变量的名称应在两个位置（css 和 js 文件）匹配

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

    const styleObject = {};

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

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

使用返回的表达式设置样式值的集合键值对。
<some-element [ngStyle]="objExp">...</some-element>

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

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

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

【讨论】：

谢谢，但我不想直接使用 DOM api。这就是为什么我问第二个关于干净/角度方式的问题。
@abhaytripathi，你可以访问 html 标签吗？我的意思是你可以给 HTML 标签添加属性吗？
ngStyle 可能会有所帮助，我会尝试对您的建议进行一些排列和组合。
在这方面我告诉你。

【解决方案2】：

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

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

【讨论】：