帶有渲染器的 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 Renderer 將覆蓋 style 屬性而不是附加到 style 屬性。

渲染器可以用來實現這個功能嗎？ 如果沒有，是否有在 Angular 中使用 CSS 自定義屬性的首選方法？ 謝謝！

Answer 1

嘗試使用Renderer2 Object 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);

Answer 2

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

在您的控制器中，您可以擁有一個具有您想要應用的 css 屬性的對象。

像這樣。

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

然后在您的 html 中，您可以在 ngStyle 中使用它來將這些屬性應用於元素。

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

希望能幫助到你。

Answer 3

嘗試使用setStyle方法

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