Youtube Iframe не может работать без обновления

Question

Чтобы воспроизвести проблему в Stackblitz , нажмите GO, чтобы перейти к компоненту, содержащему iframe, он работает сейчас, затем вернитесь назад и вперед, iframe исчезнет. Вы должны обновить страницу, чтобы снова показать iframe.

Я попробовал обходной путь:

• Я пытался освободить объект в ngOnDestroy window['onYouTubeIframeAPIReady'] = null;, но безуспешно

Это код как создать iframe

init() {
  var tag = document.createElement('script');
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

ngOnInit() {
  this.init();
  window['onYouTubeIframeAPIReady'] = (e) => {
            this.YT = window['YT'];

            this.player = new window['YT'].Player('player', {
              videoId: '1cH2cerUpMQ'
            });
  };
}

ОБРАЗЕЦ

 <div id="player" >
 </div>

У кого-то есть обходной путь с успехом, поделитесь, пожалуйста.

Answer 1

Вы можете проверить, был ли инициализирован API YouTube, а затем просто создать свой плеер:

player: any;

init() {
  if (window['YT']) {
    this.createPlayer();
    return;
  }

  var tag = document.createElement('script');
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  window['onYouTubeIframeAPIReady'] = () => this.createPlayer();
}

ngOnInit() {
  this.init();
}

createPlayer() {
  this.player = new window['YT'].Player('player', {
    videoId: '1cH2cerUpMQ'
  });
}

ngOnDestroy() {
  window['onYouTubeIframeAPIReady'] = null;
  if (this.player) {
    this.player.destroy();
  }
}

Разветвленный стек-блиц

Answer 2

Через неделю обходной путь, который работает, но кажется «грязным».

Фактически, после перехода назад и вперед функция window['onYouTubeIframeAPIReady'] больше не выполняется.

Итак, я вставил логическое значение в этот метод, сбросьте на false, если он выполнен. Затем, проверка функции для перезагрузки после тайм-аута 3 с, учитывая это значение

 //this.needToReload = true in constructor

 ngAfterViewInit(){
    let n = 3;
    var intervalId= setInterval(() => {
            n--;
            this.tick = n*10;
            if (n === 0) {
                clearInterval(intervalId);
                if(this.needToReload)
                {
                  location.reload();
                }
            }
        }, 1000);
  } 

ngOnInit() {
    this.init();
    window['onYouTubeIframeAPIReady'] = (e) => {
        this.YT = window['YT'];
        this.needToReload = false;

        this.player = new window['YT'].Player('player', {
          videoId: '1cH2cerUpMQ'
        });
    };
}