Angular: ViewChild 音频元素作为 HTMLAudioElement？

Question

我正在尝试获取组件内的 audio 元素。起初我是用老式的方式做的：

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

但我想这样做 The Angular Way™ 所以我想我应该使用 @ViewChild .但它 returns 和 ElementRef 我必须反复钻入 nativeElement 属性才能实际作用于元素，它看起来更混乱。

我会喜欢做这样的事情：

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

但这不起作用。

Answer 1

如果你把一个setter关联到ViewChild，你可以在其中初始化一个HTMLAudioElement 属性，然后使用那个属性:

$player: HTMLAudioElement;

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

有关演示，请参阅 this stackblitz。

另一种减少对 ElementRef.nativeElement 的访问的方法是定义一个 getter 属性 returns 元素：

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

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

 ngAfterViewInit() {
    console.log(this.$player);
  }

有关演示，请参阅 this stackblitz。

Angular: ViewChild 音频元素作为 HTMLAudioElement？

Angular: ViewChild audio element as HTMLAudioElement?

angular

typescript

viewchild