angular - 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

您可以检查 youtube api 是否已经初始化，然后创建您的播放器:

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();
  }
}

Forked Stackblitz