Angular: ViewChild аудио элемент как HTMLAudioElement? - PullRequest
Новая
       10

Angular: ViewChild аудио элемент как HTMLAudioElement?

0 голосов
/ 21 февраля 2019

Я пытаюсь получить элемент audio внутри компонента.Сначала я делал это по старинке: 

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

Но я хотел сделать это Angular Way ™ , поэтому я решил, что мне следует использовать @ViewChild.Но он возвращает ElementRef, и мне приходится многократно углубляться в свойство nativeElement, чтобы фактически воздействовать на элемент, и это просто кажется более грязным.

Я бы вроде сделать что-то вроде этого:

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

Но это не сработает.

1 Ответ

0 голосов
/ 21 февраля 2019

Если вы связываете сеттер с ViewChild, вы можете инициализировать в нем свойство HTMLAudioElement и впоследствии использовать это свойство: 

$player: HTMLAudioElement;

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

См. этот стек длядемо.

Другой способ сделать доступ к ElementRef.nativeElement менее раздражающим - определить свойство getter, которое возвращает элемент: 

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

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

См. этот стек для демонстрации.

...