css - Angular，在 HTMLElement 上应用样式

Question

我对 Typescript 有疑问，我正在尝试在 HTMLElement 上应用样式，代码如下：

 styleChoice(element:HTMLElement){
    console.log(element);
    element.style.background="rgba(228, 48, 48, 0.2)";
    element.style.borderRadius="40px";
  
  }
  test(){
    console.log(document.getElementById('test'));
    this.styleChoice(document.getElementById('test'));
   
  }

我不明白为什么不工作。

Answer 1

这不是 Angular 方式，Angular 方式是使用变量和[ngStyle]

例如

//in .ts
style={
   "background":"rgba(228, 48, 48, 0.2)",
   "borderRadius":"40px"
}
//in .html
<some-element [ngStyle]="style">...</some-element>

//or directly
 <some-element [ngStyle]="{'background':'rgba(228, 48, 48, 0.2)',
                                        'borderRadius':'40px'}">
     ...
 </some-element>

您可以根据变量更改样式，例如

variable=true;
<some-element [ngStyle]="variable?style:null">...</some-element>

如果只想更改一个属性，您可以使用[style.property]

//in .ts
backgroundColor="rgba(228, 48, 48, 0.2)"
//in .html
<some-element [style.background]="backgroundColor">...</some-element>

Answer 2

为此，您应该使用 Renderer2。这将是一个不错的选择。不要直接在应用程序中使用该文档，请在此处查看更多详细信息。

export class DemoComponent {
  constructor(
    private element: ElementRef,
    private renderer: Renderer2,
  ){

  }

styleChoice(element:HTMLElement){
    console.log(element);
    //element.style.background="rgba(228, 48, 48, 0.2)";
    renderer.setStyle(el, 'background', 'red');
    renderer.setStyle(el, 'borderRadius', '40px');
   // element.style.borderRadius="40px";
  
  }
  test(){
    console.log(document.getElementById('test'));
    this.styleChoice(document.getElementById('test'));
   
  }
}

您可以在此处查看renderer2文档。