访问Angular 2中的DOM元素并更改元素的class属性

import { Component, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '<div #myElement>Example Element</div>'
})
export class ExampleComponent {
  constructor(private renderer: Renderer2, private el: ElementRef) { }
}

this.renderer.addClass(this.el.nativeElement, 'my-class');

this.renderer.removeClass(this.el.nativeElement, 'my-class');

this.renderer.addClass(this.el.nativeElement, 'my-class');
// 如果元素已经有'my-class'，则移除它；如果元素没有'my-class'，则添加它
this.renderer.toggleClass(this.el.nativeElement, 'my-class');

const hasClass = this.el.nativeElement.classList.contains('my-class');

import { Component, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '<button (click)="changeClass()">Change Class</button><div #myElement>Example Element</div>'
})
export class ExampleComponent {
  constructor(private renderer: Renderer2, private el: ElementRef) { }

  changeClass() {
    this.renderer.addClass(this.el.nativeElement, 'my-class');
  }
}