Angular8+TypeScript获取audio元素报错及getElementById转TS方法

为什么会出现this.music is null的错误？ #

你之前的代码直接在类的属性定义阶段调用document.getElementById("music")，这时候Angular还没完成组件的DOM渲染——组件类初始化早于DOM节点的挂载，所以原生DOM方法根本找不到目标元素，自然返回null，后续访问this.music.duration就会触发类型错误。

正确的实现方式（两种方案） #

方案1：使用Angular官方推荐的@ViewChild（更符合Angular组件化规范）

这种方式不需要依赖元素ID，而是通过模板引用变量来关联DOM元素，更适合Angular项目的开发模式。

第一步，在HTML模板中给audio添加模板引用变量：

<audio #audioPlayer preload="true">
  <source src="./assets/img/hollywood.mp3">
</audio>

第二步，在组件类中通过@ViewChild获取元素，并在合适的生命周期钩子中处理音频时长：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements AfterViewInit {
  // 用ViewChild获取模板引用的audio元素，指定类型为HTMLAudioElement
  @ViewChild('audioPlayer') audioPlayer!: ElementRef<HTMLAudioElement>;
  audioDuration: number = 0;

  // 等到DOM完全渲染完成后再操作元素，ngAfterViewInit是合适的时机
  ngAfterViewInit(): void {
    const audioElement = this.audioPlayer.nativeElement;
    
    // 注意：音频的duration需要等元数据加载完成后才能拿到有效值，所以要监听loadedmetadata事件
    audioElement.addEventListener('loadedmetadata', () => {
      this.audioDuration = audioElement.duration;
      console.log('音频时长（秒）:', this.audioDuration);
    });
  }
}

方案2：坚持使用原生document.getElementById（不推荐，但可以实现）

如果一定要用原生DOM方法，必须确保在DOM渲染完成后调用，同样要在ngAfterViewInit钩子中执行，并且做好空值判断：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements AfterViewInit {
  music!: HTMLAudioElement;
  audioDuration: number = 0;

  ngAfterViewInit(): void {
    // 用类型断言告诉TypeScript这个元素是HTMLAudioElement类型
    this.music = document.getElementById('music') as HTMLAudioElement;
    
    // 先判断元素是否存在，避免null报错
    if (this.music) {
      this.music.addEventListener('loadedmetadata', () => {
        this.audioDuration = this.music.duration;
        console.log('音频时长（秒）:', this.audioDuration);
      });
    }
  }
}

关于"get element by id"的TypeScript写法 #

TypeScript是JavaScript的超集，原生的document.getElementById()可以直接在TS中使用，核心是类型断言：

• 写法1：document.getElementById('music') as HTMLAudioElement（TS推荐的写法）
• 写法2：<HTMLAudioElement>document.getElementById("music")（你之前用的写法，也有效）

类型断言的作用是告诉TypeScript：你确定这个DOM元素就是HTMLAudioElement类型，这样TS就不会因为类型不确定而报错，同时还能提供对应的类型提示。

不过再次强调：在Angular项目中，优先使用@ViewChild或@ViewChildren来获取DOM元素，这是Angular设计的标准方式，更便于组件的维护和测试。

内容的提问来源于stack exchange，提问作者DuB loxx