Youtube Iframe APIをAngular2に含めるにはどうすればよいですか？

Question

私はAngular-cliを使用しています。 Angular2モジュール内でYouTubeのiframe apiを利用したいと思います。 youtube-iframe node packageを動作させることができませんでした。そしてAngular2に特化したパッケージのほうが完全なAPI機能をサポートしていないようです。

これまでの私の仕事は アセットフォルダにactual apiを含めました。 .angular-cli.jsonファイル内にスクリプトとして場所を追加しました。私はChromeで開いているデベロッパーツールを持っている場合、それが動作

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

：

これは次のように私のAppComponentが見えるものです。しかし、私は彼らが閉じているときはありません。これは私が得るエラーです：を使用していると思います。誰でも私にこのことを正しく行うためのステップガイドを提供することはできますか？

Answer 1

これはtimingの問題です。 onYouTubeIframeAPIReadyについては、youtubeのコールバックです。だからngOninit() or ngAfterViewInit()の中には、windowレベルで登録することをお勧めします。

何かのように：

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