在angular中调用classList.add时出现未定义的错误

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

@Component({
  selector: 'app-my-component',
  template: '<div #myElement class="my-element"></div>'
})
export class MyComponent {
  @ViewChild('myElement', { static: true }) myElement: ElementRef;
  
  // ...
}

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

@Component({
  selector: 'app-my-component',
  template: '<div #myElement class="my-element"></div>'
})
export class MyComponent implements AfterViewInit {
  @ViewChild('myElement', { static: true }) myElement: ElementRef;
  
  ngAfterViewInit() {
    // 在ngAfterViewInit中调用classList.add
    this.myElement.nativeElement.classList.add('new-class');
  }
}

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

@Component({
  selector: 'app-my-component',
  template: '<div #myElement class="my-element"></div>'
})
export class MyComponent {
  @ViewChild('myElement', { static: true }) myElement: ElementRef;
  
  ngAfterViewInit() {
    setTimeout(() => {
      // 延迟调用classList.add
      this.myElement.nativeElement.classList.add('new-class');
    }, 0);
  }
}