我正在尝试将 Vanilla JavaScript 代码转换为 Angular 2+。
在 Javascript 中，我有这样的声明：
document.documentElement.style.setProperty(`--${cssVariableName}`, value);
在 Angular 中，我发现复制上述语句的唯一方法是这样的：
renderer.setProperty(document.documentElement, 'style', `--${cssVariableName}: ${value}`);
问题：如果我在不同时间动态设置了多个自定义属性（--cssVariable1、--cssVariable2...）。Angular Renderer 将覆盖 style 属性，而不是附加到 style 属性。
渲染器可以用来实现这个功能吗？如果没有，是否有在 Angular 中使用 CSS 自定义属性的首选方式？谢谢！
尝试使用Renderer2对象setStyle方法
/**
* Implement this callback to set a CSS style for an element in the DOM.
* @param el The element.
* @param style The name of the style.
* @param value The new value.
* @param flags Flags for style variations. No flags are set by default. enum: 1 or 2, 1: Marks a style as important. 2: Marks a style as using dash case naming (this-is-dash-case).
*/
abstract setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void;
你需要这个
renderer.setStyle(document.documentElement, `--${cssVariableName}`, `${value}`, 2);
您可以使用的是 [ngStyle]。您不需要使用渲染器。
在您的控制器中，您可以拥有一个具有您要应用的 css 属性的对象。
像这样。
props = {'color': 'red', 'font-size': '18px'};
然后在您的 html 中，您可以在 ngStyle 中使用它来将这些属性应用于元素。
<div [ngStyle]="props">Great example</div>
希望能帮助到你。
尝试使用setStyle方法
renderer.setStyle(document.documentElement, `--${cssVariableName}`, `${value}`);