如何将"get element by id"翻译成TypeScript

Question

我的项目是基于 Angular 8 并使用 typescript。

我正在尝试通过id获取HTML音频元素并将其存储在变量中。 然后，我想从该元素中获取时长并将其存储在另一个变量中。

正如在一个工作的JavaScript示例中所看到的那样，这可以通过以下方式实现：

HTML

<audio id="music" preload="true">
  <source src="./assets/img/hollywood.mp3">

JS

var music = document.getElementById('music'); 
var duration = music.duration;

现在我的TypeScript翻译是这样的：

TS

public music = <HTMLAudioElement>document.getElementById("music");
public duration = this.music.duration;

但是当我加载该页面时，出现了错误“Uncaught (in promise): TypeError: this.music is null”，我不知道为什么。

- DuB loxx

---

如果你从 this.music.duration 中删除 this 呢？我不熟悉 TS。 - Fasani

这不是 TypeScript 错误。preload=true 告诉浏览器先获取音频文件。但是在执行脚本时，音频文件还没有加载完成。 - MonteCristo

@Fasani，如果我移除这个，变量music就无法被识别。 - DuB loxx

@MonteCristo 如果我移除它，会打印相同的错误。 - DuB loxx

在 ngAfterViewInit() 中访问 DOM 元素。 - Salmin Skenderovic

Answer 1

你可以使用模板引用变量，使用 ViewChild 和 ElementRef 来保持 Angular 的方式。尝试以下内容：

模板

<audio #stream autoplay (play)="onPlay()">
  <source src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg">
</audio>

控制器

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

@Component({
  selector: 'my-app'
})
export class AppComponent {

  audioPlayer: HTMLAudioElement;

  @ViewChild('stream') set playerRef(ref: ElementRef<HTMLAudioElement>) {
    this.audioPlayer = ref.nativeElement;
  }

  onPlay() {
    console.log(this.audioPlayer.duration);
  }
}

它使用set将元素引用的nativeElement绑定到audioPlayer变量。 ngAfterViewInit()不能保证访问duration会返回正确的值，因为音频可能尚未开始播放。在这种情况下，它将返回null。因此，我将其绑定到play事件以获取持续时间。

工作示例：Stackblitz

- ruth

---

小细节：当添加preload true时，可以通过ngAfterViewInit访问持续时间，使用this.duration = this.audioplayer.duration。以防有人想知道这是如何工作的。 - DuB loxx

Answer 2

添加 #nameForYourRef

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

然后在viewInit上访问您的元素

@ViewChild('myAudio') myAudioRef: ElementRef;

  ngAfterViewInit() {
    // Console log some methods to see that it is working
    console.log(
      this.myAudioRef.nativeElement.play,
      this.myAudioRef.nativeElement.pause,
    )
  }

Demo: https://stackblitz.com/edit/angular-a8jahz

- Salmin Skenderovic