Простой способ импортировать YouTube iframe API в Angular 6?

Question

Так что мне нужно отследить отслеживание времени и т. Д. YouTube-страницы, встроенной в наше приложение, я решил, что лучше всего использовать API iframe YouTube и прослушивать события, но использовать (onReady) в шаблоне, а затем назначить егоМетод в контроллере - очевидный способ не работает:

Документы показывают этот метод (https://developers.google.com/youtube/iframe_api_reference),, но он включает в себя теги сценария в шаблоне, мне нужен угловой способ сделать это бездобавление большого количества ts в ваш html и нарушение общей согласованности проекта, а также документы не показывают, как это сделать в Angular2,

Answer 1

С тех пор я нашел способ, взяв ссылку из ответа stackoverflow

В вашем шаблоне: <div #ytPlayer id="ytPlayer"></div>

В ts ngAfterViewinit:

ngAfterViewInit() {
const doc = (<any>window).document;
const playerApiScript = doc.createElement('script');
playerApiScript.type = 'text/javascript';
playerApiScript.src = 'https://www.youtube.com/iframe_api';
doc.body.appendChild(playerApiScript);
}

Изатем прослушайте событие, которое iFrame запускает в окне, когда оно завершает загрузку API:

(<any>window).onYouTubeIframeAPIReady = () => {
  this.player = new (<any>window).YT.Player('ytPlayer', {
    height: '500px',
    width: '100%',
    videoId: 'hHMyZR87VvQ',
    playerVars: { 'autoplay': 0, 'rel': 0, 'controls': 2 },
    events: {
      'onReady': (event) => {
        console.log('Player is ready');
      },
      'onStateChange': (event) => {
      }
    }
  });
};

Затем вы можете вызывать методы, такие как getCurrentTime (), для плеера или любой переменной, которой вы его назначаете.

Редактировать: Он по-прежнему использует объект документа и окна вместо углового элемента ref, однако я обновлю этот ответ, как только найду способ сделать это с помощью окна / документа.