当您转到下一页并再次返回时，不会显示 Youtube 播放器：离子答案

【问题标题】：Youtube player is not show when you go next page and come back again : ionic当您转到下一页并再次返回时，不会显示 Youtube 播放器：离子
【发布时间】：2018-09-21 14:44:37
【问题描述】：

我正在使用 https://github.com/morganster/ionic-youtube-ng2 库在 ionic 3 中实现 youtube 播放器。当我们打开主页时它工作正常（我只在主页上使用播放器），而不是使用navCtrl.push 转到下一页。并使用返回按钮返回主页。

但是当我使用navCtrl.setRoot 转到下一页并从菜单（抽屉菜单）返回时，主页没有 YouTube 播放器，那个时候 div 是空的。

this.youtube.player.destroy(); 出现错误我把它改成了this.youtube.destroy();，当我回到主页时仍然不起作用。

我在https://github.com/morganster/ionic-youtube-ng2/blob/master/src/pages/home/home.ts 上添加了额外的代码，最后用 NavController 模块

gototTest(){
   this.navCtrl.setRoot(TestPage);
}

home.html

<button (click)="gotoTest()">Go to Test Page</button>

并在page文件夹中创建了一个TestPage

 gototHome(){
   this.navCtrl.setRoot(HomePage);
}

test.html

<button (click)="gotoHome()">Go to Home Page</button>

我将使用按钮单击测试页面并通过单击 gotoHome() 按钮返回主页。现在，youtube player div 是空的。什么都没有播放，没有 youtube iframe。

【问题讨论】：

请考虑向我们提供一些代码以帮助您。
嗨，我已经编辑了我的代码。我正在使用完整的存储库github.com/morganster/ionic-youtube-ng2
您似乎正在尝试在这里进行导航。你为什么不使用Angular router 和组件呢？我认为不建议“手动”渲染。

标签： angular youtube-api ionic3

【解决方案1】：

代码适用于单页应用。这是你可以做的。（PS：播放器也在页栈中运行，但不是在setRoot之后）

从 app.components.ts 中剪下代码var tag ... firstScriptTag); 并粘贴到 yourPage.ts 的构造函数下方，一个新的函数ionViewWillEnter()：

ionViewWillEnter(){
    let tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    let firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    this.ytPlayer.setupPlayer();
}

还要注意this.player.setupPlayer() 中的更改。仅此而已。

这里是explanation on another post

【讨论】：