javascript - 在 Angular 的自定义指令中访问 CSS 变量的最佳方法

我有一个关于...的问题。我们如何将以下语句转换为 Angular 的 Renderer2？

this.elementRef.nativeElement.style.setProperty( '--primary-color ' , '#455363' )

以上语句是在选择暗模式时将 css-变量更改为指令。在 Angular 中直接访问 DOM 并不是好的做法，所以我们使用 renderer2。但是我不知道如何将以上语句转换为 renderer2 以安全地访问 DOM。

非常简单地，有人能告诉我如何使用 renderer2 在指令中安全地更改 CSS 变量，或者获取 CSS 变量到指令中的最佳方法吗。

谢谢你。

答案＃1

当我详细了解 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;

现在我们可以传递第四个参数 2，这将有助于使用 - 风格的变量来定义 css 变量，没有 2 参数 setStyle() 将无法识别 cas 变量。所以这实际上就是我对我问题的答案。

`this.renderer.setStyle(this.elementRef.nativeElement, `--primary-color`, '#455363' , 2 )` 

答案＃2

我相信你正在寻找类似这样的东西：

constructor(private renderer: Renderer2, private elementRef: ElementRef) {}

ngOnInit() {
  this.renderer.setStyle(
    this.elementRef.nativeElement,
    '--primary-color',
    '#455363'
  );
}