Как перевести «получить элемент по идентификатору» в машинопись - PullRequest
Новая
       49

Как перевести «получить элемент по идентификатору» в машинопись

1 голос
/ 29 апреля 2020

Мой проект выполняется на Angular 8 с машинописью.

Я пытаюсь получить аудио элемент html по id и сохранить его в переменной. Затем я хочу получить длительность из элемента и сохранить ее в другой переменной.

Как видно из рабочего примера, в Javascript это будет go как:

HTML

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

JS

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

Теперь мой перевод на машинописный текст такой:

TS 

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

Но когда я загружаю страницу, я получаю ошибку "Uncaught (в обещании): TypeError: this.musi c is null" и я не понимаю, почему.

Ответы [ 2 ]

0 голосов
/ 29 апреля 2020

Вы можете использовать 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);
  }
}

Он связывает nativeElement ссылки на элемент с переменной audioPlayer, используя set.

ngAfterViewInit() не может гарантировать, что доступ к duration вернет правильное значение, поскольку звук может не начаться. В этом случае он вернет null. Поэтому я связал его с событием play, чтобы получить продолжительность.

Рабочий пример: Stackblitz

0 голосов
/ 29 апреля 2020

Добавить # 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,
    )
  }

Демо: https://stackblitz.com/edit/angular-a8jahz

...