Angular波形库报错：无法读取undefined的'nativeElement'属性

错误原因 #

首次点击录音时，承载波形的DOM容器（<div #waveform>）并未完成渲染：

• HTML中波形容器被*ngIf="audioSectionVisible"控制，而你在startRecording开头设置了this.mediaSectionVisible = false（疑似笔误，应为audioSectionVisible），导致DOM未初始化；
• Angular的ViewChild引用waveformElement在DOM未渲染时为undefined，此时调用waveformElement.nativeElement就会抛出上述错误。
  第二次点击时，DOM已因之前的操作完成渲染，因此waveformElement能正常获取，WaveSurfer实例可创建。

修复方案 #

1. 修正视图显示逻辑，确保DOM先渲染 #

首先修正startRecording开头的视图控制代码，确保波形容器所在的区域被正确显示：

startRecording() {
  // 修正：设置audioSectionVisible为true，触发波形容器DOM渲染
  this.audioSectionVisible = true;
  // 移除错误的mediaSectionVisible设置（如果不需要的话）
  // this.mediaSectionVisible = false;
  
  if (!this.isRecording) {
    // ... 后续代码保持不变，先执行变更检测确保DOM更新
    this.cdr.detectChanges();

2. 延迟初始化WaveSurfer，确保DOM就绪 #

将WaveSurfer的初始化逻辑延迟到DOM渲染完成后执行，用setTimeout即可实现简单可靠的延迟：

// 在getUserMedia的then回调中，调整WaveSurfer初始化的位置：
// ... 现有代码 ...

this.cdr.detectChanges();

// 延迟执行WaveSurfer初始化，确保DOM已渲染
setTimeout(() => {
  if (this.wavesurfer) {
    this.wavesurfer.destroy();
  }

  this.wavesurfer = WaveSurfer.create({
    container: this.waveformElement.nativeElement as HTMLElement,
    waveColor: '#E7E7E7',
    progressColor: '#222021',
    cursorColor: '#ffffff',
    height: 55,
    barWidth: 8,
    barGap: 3,
    barRadius: 30,
    autoScroll: true,
    autoCenter: true,
    autoplay: false,
  });

  this.wavesurfer.once('interaction', () => {
    this.wavesurfer?.play();
  });
}, 0);

// ... 现有代码 ...

3. 确保ViewChild正确声明 #

确认组件中已正确声明ViewChild引用：

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

// 组件类内：
@ViewChild('waveform', { static: false }) waveformElement!: ElementRef<HTMLElement>;

static: false确保在视图初始化后才获取引用，适配Angular 8+的ViewChild语法。

额外优化建议 #

• 避免频繁手动调用cdr.detectChanges()，尽量依赖Angular的自动变更检测机制；
• 在组件的ngOnDestroy钩子中销毁WaveSurfer实例，防止内存泄漏：

  ngOnDestroy() {
    if (this.wavesurfer) {
      this.wavesurfer.destroy();
    }
    if (this.recordingTimer) {
      clearInterval(this.recordingTimer);
    }
  }
  

内容的提问来源于stack exchange，提问作者Darshan Dholakiya