Javascript 带渲染器的Angular 2+CSS自定义属性（变量）

我正在尝试将普通JavaScript代码转换为Angular 2+

在Javascript中，我有这样一个语句：

document.documentElement.style.setProperty(`--${cssVariableName}`, value);

renderer.setProperty(document.documentElement, 'style', `--${cssVariableName}: ${value}`);

在Angular中，我发现复制上述语句的唯一方法如下：

document.documentElement.style.setProperty(`--${cssVariableName}`, value);

renderer.setProperty(document.documentElement, 'style', `--${cssVariableName}: ${value}`);

问题：如果在不同的时间动态设置多个自定义属性-cssVariable1，-cssVariable2。。。。角度渲染器将覆盖样式属性，而不是附加到样式属性

可以使用渲染器实现此功能吗？如果没有，是否有在Angular中使用CSS自定义属性的首选方法？谢谢

尝试使用setStyle方法

尝试使用setStyle方法

---

您可以使用的是[ngStyle]。您不需要使用渲染器

在控制器中，可以有一个具有要应用的css属性的对象

像这样

props = {'color': 'red', 'font-size': '18px'};

然后在html中，您可以使用该样式将这些属性应用于元素

<div [ngStyle]="props">Great example</div>

---

希望有帮助。

您可以使用的是[ngStyle]。您不需要使用渲染器

在控制器中，可以有一个具有要应用的css属性的对象

像这样

props = {'color': 'red', 'font-size': '18px'};

然后在html中，您可以使用该样式将这些属性应用于元素

<div [ngStyle]="props">Great example</div>

希望有帮助。

尝试使用Renderer2对象设置样式方法

你需要这个

 renderer.setStyle(document.documentElement, `--${cssVariableName}`, `${value}`, 2);

尝试使用RenderR2对象设置方式方法

你需要这个

 renderer.setStyle(document.documentElement, `--${cssVariableName}`, `${value}`, 2);

---

setStyle将属性添加到元素的样式标记中，并附加属性。但是，将忽略自定义特性的操作，并且不会添加该特性。示例：'-background'，green'//无效的'background'，green'//有效请参见下面@vikey的答案。对于这些情况，需要将第三个可选参数设置为2。我刚刚测试了它，我可以确认它WorksetStyle向元素的样式标记添加了一个属性，并添加了属性。但是，将忽略自定义特性的操作，并且不会添加该特性。示例：'-background'，green'//无效的'background'，green'//有效请参见下面@vikey的答案。对于这些情况，需要将第三个可选参数设置为2。我刚测试过，我可以确认你看到了吗？谢谢你的链接！这帮了大忙，谢谢！你看到这个了吗？谢谢你的链接！这帮了大忙，谢谢！你是救命恩人我完全错过了那里的旗手，浪费了一个小时搔头！你是救命恩人我完全错过了那里的旗手，浪费了一个小时搔头！