如何在Angular中向本机元素添加多种样式

Question

我正尝试使用renderer2 API将多种样式添加到angular的本机元素中。

我有一个要求，其中的样式将动态更改，并且可以具有多种样式。这就是为什么我不使用类（addClass / removeClass）的原因。

构造函数（     私人elRef：ElementRef，     私有渲染器：Renderer2   ）

this.renderer.setStyle（this.elRef.nativeElement，“ text-align”，“ center”）; .... ...

需要一种动态添加样式的方法。就像是： this.renderer.setStyle(this.elRef.nativeElement, {style1: value1, style2: value2});

Answer 1

尝试

 constructor(private element: ElementRef){
    let el = this.element.nativeElement;
    el.setAttribute('style', 'color: white; background: red');
  }

Answer 2

您必须为每种样式多次调用它，或者仅使用addClass并在类中定义样式。

https://angular.io/api/core/Renderer2#addclass

https://angular.io/api/core/Renderer2#setStyle