Javascript 如何在Angular2中包含Youtube Iframe API？

我正在使用Angular cli。我想在Angular2模块中使用youtube iframe api。我没法让孩子们去上班。而且更特定于Angular2的软件包似乎不支持完整的api功能

以下是我迄今为止的工作： 我已经在我的资产文件夹中包含了。我已将该位置作为脚本添加到我的

.angular cli.json

文件中

这就是我的AppComponent的外观：

export class AppComponent {
YT;
constructor(){
    this.YT = window["YT"];
}

onYouTubeIframeAPIReady() {
    console.log(this.YT);
    var player;
    player = new this.YT.Player('muteYouTubeVideoPlayer', {
        videoId: 'KKYYAbGpw6A', // YouTube Video ID
        width: 560,               // Player width (in px)
        height: 316,              // Player height (in px)
        playerVars: {
          autoplay: 1,        // Auto-play the video on load
          controls: 0,        // Show pause/play buttons in player
          showinfo: 0,        // Hide the video title
          modestbranding: 0,  // Hide the Youtube Logo
          loop: 1,            // Run the video in a loop
          fs: 0,              // Hide the full screen button
          cc_load_policy: 0, // Hide closed captions
          iv_load_policy: 0,  // Hide the Video Annotations
          autohide: 1         // Hide video controls when playing
        },
        events: {
          onReady: function(e) {
            e.target.mute();
          }
        }
    });
}

ngAfterViewInit(){
    this.onYouTubeIframeAPIReady();
}

当我在Chrome中打开devTools时，它就会工作。但当我把它们关上的时候就不会了。这是我得到的错误：

this.YT.Player is not a constructor
at AppComponent.webpackJsonp.328.AppComponent.onYouTubeIframeAPIReady

---

我想问题在于使用

窗口[“YT”]

。有人能给我一个正确操作的分步指南吗？

这应该是一个时间问题。对于

onyoutubeiframeapiredy

，它是youtube提供的回调。因此，在

ngOninit（）或ngAfterViewInit（）中，我建议您在
窗口
级别注册它，以便在一切就绪时让youtube API调用它

比如：

(<any>window).onYouTubeIframeAPIReady = ()=>{
    console.log((<any>window).YT);
    this.player = new (<any>window).YT.Player('muteYouTubeVideoPlayer', {
        videoId: 'KKYYAbGpw6A', // YouTube Video ID
        width: 560,               // Player width (in px)
        height: 316,              // Player height (in px)
        playerVars: {
          autoplay: 1,        // Auto-play the video on load
          controls: 0,        // Show pause/play buttons in player
          showinfo: 0,        // Hide the video title
          modestbranding: 0,  // Hide the Youtube Logo
          loop: 1,            // Run the video in a loop
          fs: 0,              // Hide the full screen button
          cc_load_policy: 0, // Hide closed captions
          iv_load_policy: 0,  // Hide the Video Annotations
          autohide: 1         // Hide video controls when playing
        },
        events: {
          onReady: function(e) {
            e.target.mute();
          }
        }
    });
}

（窗口）.onYouTubeIframeAPIReady=（）=>{
console.log（（window.YT）；
this.player=new（window）.YT.player（'muteYouTubeVideoPlayer'{
videoId:'KKYYAbGpw6A'，//YouTube视频ID
宽度：560，//播放器宽度（像素）
高度：316，//播放器高度（像素）
playerVars：{
自动播放：1，//加载时自动播放视频
控件：0，//在播放器中显示暂停/播放按钮
showinfo:0，//隐藏视频标题
0，//隐藏Youtube徽标
循环：1，//在循环中运行视频
fs:0，//隐藏全屏按钮
cc_load_策略：0，//隐藏隐藏的标题
iv_加载_策略：0，//隐藏视频批注
自动隐藏：1//播放时隐藏视频控件
},
活动：{
onReady：函数（e）{
e、 target.mute（）；
}
}
});
}