Question

我正在使用ViewChild指令并获取元素引用。

如何在Angular Component中获取html元素类？

如何在Angular Component中获取html元素自定义类（而不是创建angular的类）？

Answer 1

this.viewChild.nativeElement.classList

这样，您可以将“班级”列表作为数组获取。

Answer 2

如果您只想从div等任何HTML元素中获取和设置类，则可以在angular中使用ElmentRef。

您可以使用模板变量（即#useThisTemplateVar）获取HTML元素，并只需使用 @ViewChild（）装饰器定位该元素即可。

import { Component, ElementRef, ViewChild } from "@angular/core";

@Component({
  selector: "app-example",
  template: `

 <div #useThisTemplateVar class="myClass">
   My some other content!
 </div>

<button type="button" (click)="changeClass()">change class</button>

`,
  styleUrls: ["./example.component.scss"]
})

export class ExampleComponent implements {

@ViewChild('useThisTemplateVar') elRef: ElementRef; 
changeClass(): void {
  this.elRef.nativeElement.className === "myClass" ? 
  this.elRef.nativeElement.className = "yourClass" : 
  this.elRef.nativeElement.className = "myClass"; 
}

}

注意：根据角度安全指南，您应该停止使用对DOM元素的直接访问，以防止对Web应用程序进行XSS攻击。

了解更多信息：ElementRef Angular official documentation，Angular security Guide

如何在Angular Component中获取html元素类？

2 个答案: