javascript - 无法读取 null 的属性 'play'

Question

所以，我想做的是创建一个自定义音频播放器。够简单吧？这就是我的想法，但后来我收到此错误“无法读取 null 的属性‘play’”。我正在阅读相关内容，我了解到其中一种可能性可能是该函数在 ID 存在之前被调用？但对我来说，这没有意义，因为当一个人点击播放时，该属性确实存在。我以前从未创建过自定义音频播放器，所以我在这里可能会出错，但我想知道如何让它工作。我想通过单击按钮来播放歌曲。这是我到目前为止所拥有的

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "app";
  audioPlayer = <HTMLMediaElement>document.getElementById("myAudio");

  constructor() {}

  ngOnInIt() {}

  start() {
    this.audioPlayer.play();
  }
}

app.component.html

<div class="container-fluid">
  <div class="row row1">
    <div class="col-sm-12 col-md-12 col-lg-12 text-center mb-3">
      <img src="../assets/tour.jpg" class="img-fluid" />
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12 text-center">
      <p class="audio-title">Dark Queen - Lil Uzi vert</p>
      <button class="btn btn-success" id="play" (click)="start()">play</button>
      <button class="btn btn-primary" id="pause">pause</button>
      <audio id="myAudio" class="audio" controls>
        <source src="../assets/darkqueen.mp3" type="audio/mpeg" />
      </audio>
    </div>
  </div>
</div>

Uncaught TypeError: Cannot read property 'play' of null这是我发现的唯一的其他讨论，但老实说，它与我所面临的不同。

感谢您的阅读。

Answer 1

该模板可在 ngAfterViewInit Hook 中使用。不在构造函数或 ngOnInit 中。

但是更好的是使用@ViewChild():

<audio class="audio" controls #myAudio>
  <source src="../assets/darkqueen.mp3" type="audio/mpeg">
</audio>

export class AppComponent {
  @ViewChild('myAudio')
  audioPlayer?: ElementRef<HTMLMediaElement>;

  start() {
    if (this.audioPlayer) { // if statement needed for strict typescript
      this.audioPlayer.nativeElement.play();
    }
  }
}