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

Question

我正在尝试将 Vanilla JavaScript 代码转换为 Angular 2+。

在Javascript中，我有这样的说法：

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

在 Angular 中，我发现复制上述语句的唯一方法是这样的：

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

问题：如果我有多个在不同时间动态设置的自定义属性（--cssVariable1、--cssVariable2...）。 Angular 渲染器将覆盖样式属性而不是附加到样式属性.

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

Answer 1

尝试使用setStyle方法

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

Answer 2

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

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

像这样。

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

然后在您的 html 中，您可以在 ngStyle 中使用它来将这些属性应用于元素。

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

希望对您有所帮助。

Answer 3

尝试使用 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);

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

Angular 2+ CSS Custom Properties (variables) with Renderer

javascript

css

angular

angular-renderer

angular-renderer2