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来实现这一点。这将是一个不错的选择。不要直接在应用程序中使用该文档，请查看此处了解更多详细信息。

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>