如何通过选择使用角度中的类名来将样式应用于元素？

这是关于 Angular CSS 样式应用程序。 因此，一旦用户应用 css 样式，它就会使用 renderer2 应用于每个元素。

以下是样式的示例键值对。

const style = {key: 'background-color', value: 'blue'}

样式和元素将由模板传递（即模板内部调用上述方法）

<button (click)="setStyle(style, element)">
</button>

但我想通过类名查询选择每个元素，然后我想应用样式，如下所示：

constructor(private renderer: Renderer2) {

}

setStyle(style, element) {
this.renderer.setStyle(document.getElementsByClassName(element.className)[0], style.key, style.value
}

但上面的方法似乎行不通。

有没有一种方法可以通过先按类名选择元素然后对其进行样式设置来设置元素的样式？ （或者可能会使用新样式动态添加一个类 - 但请记住该类尚未在 css 规则/定义中定义；而是在我们进行时创建）

NOTE 主要思想是通过类名定位元素，然后设置其样式。

这不是正确的方法，但有解决方案。我的建议是通过以下方式选择元素id而不是由class。通过使用 ID，将仅返回单个元素，但通过使用类，将返回元素列表。

注意：您可以添加if条件来检查您想要的特定元素，然后向其添加类。

组件.ts 文件

import { Component, , ElementRef, AfterViewInit } from '@angular/core';
.
.
constructor(private elementRef: ElementRef){};

 ngAfterViewInit(){
    const dom: HTMLElement = this.elementRef.nativeElement;
    const elements = dom.querySelectorAll('.class-to-select')
    elements.forEach((domElement)=>{
      domElement.classList.add('myNewClassToAdd');
    })
  }

组件.css 文件

.myNewClassToAdd{
   font-family: monospace;
   color: tomato;
}

希望它有帮助！！...快乐编码！