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

【问题标题】：How to apply styles to elements by selecting using class names in angular?如何通过在角度中选择使用类名来将样式应用于元素？
【发布时间】：2020-08-20 21:46:35
【问题描述】：

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

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

【问题讨论】：

标签： angular

【解决方案1】：

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

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

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;
}

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

【讨论】：