Angular：ViewChild 音频元素作为 HTMLAudioElement？

Question

我试图audio在组件中获取一个元素。起初我是用老式的方式做的：

$player: HTMLAudioElement;
...
ngOnInit() {
  this.$player = document.getElementById('stream')
}

但我想做The Angular Way™，所以我想我应该使用@ViewChild. 但它返回 anElementRef并且我必须反复钻取该nativeElement属性才能实际作用于该元素，而且它看起来更混乱。

我就喜欢做这样的事情：

@ViewChild('stream') $player: HTMLAudioElement;

但这不起作用。

Answer 1

如果将 setter 关联到ViewChild，则可以HTMLAudioElement在其中初始化一个属性，然后使用该属性：

$player: HTMLAudioElement;

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

有关演示，请参阅此 stackblitz。

另一种使访问ElementRef.nativeElement不那么烦人的方法是定义一个返回元素的 getter 属性：

@ViewChild('stream') playerRef: ElementRef<HTMLAudioElement>;

get $player(): HTMLAudioElement {
  return this.playerRef.nativeElement;
}

有关演示，请参阅此 stackblitz。