angular - 如何通过选择使用 Angular 类名称来将样式应用于元素？

Question

这是关于一个 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 规则/定义中定义；而是在我们进行时创建)

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

Answer 1

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

Note: You can add an if condition to check for the particular element that you want and then add class to it.

component.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');
    })
  }

component.css 文件

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

希望对您有所帮助!!.. 编码愉快!!