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

您应该使用 Renderer2 才能正常工作。这将是一个不错的选择。不要直接在应用程序中使用文档，请查看 here 了解更多详情。

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 文档。

Answer 2

这不是 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>

Angular，在 HTMLElement 上应用样式

Angular, apply a style on a HTMLElement

css

styles

typescript

htmlelements

angular