Angular 2のYouTube iFrameイベント後にビューを更新する

Question

私はangular2にYouTube iFrame APIを使用しようとしていますが、問題が発生しています。

let onStateChange = (state) => { 
    if (state.data === window['YT'].PlayerState.PLAYING) { 
     console.log("window['YT'].PlayerState.PLAYING"); 
     this.isPlaying = true; 
    } 
    if (state.data === window['YT'].PlayerState.PAUSED) { 
     console.log("window['YT'].PlayerState.PAUSED"); 
     this.isPlaying = false; 
    } 
}; 

、その後

this.player = new window['YT'].Player("video-player", {events: { onStateChange } }); 

プレーヤーのイベントを処理するコールバックが実行されますが、ビューは更新されません。ここで

ビューは次のとおりです。

<button class="control" (click)="play()" *ngIf="!isPlaying">Play</button> 
<button class="control" (click)="pause()" *ngIf="isPlaying">Pause</button> 

私は、「再生」をクリックすると、動画の再生が、「一時停止」ボタンが表示されない（ボタンはどちらか消えない「再生します」） 。

「再生しない」ボタンをもう一度クリックすると、動画は再生され続け、「再生」ボタンは「一時停止」に置き換えられます。それで、それは2回目です。

は、私はすでにそれをググが、解決策を見つけることができませんでした：私はちょうど解決策を見つけた

• angular 2.0 equivalent to $scope.$apply
• Angular 2 - Substitute for $scope.$apply?

Answer 1

。

インポートNgZone

import { ..., NgZone } from '@angular/core'; 

constructor(private ngZone: NgZone) {} 

そして

let onStateChange = (state) => { 
    this.ngZone.run(() => { // This was the trick 
     if (state.data === window['YT'].PlayerState.PLAYING) { 
      this.isPlaying = true; 
     } 
     if (state.data === window['YT'].PlayerState.PAUSED) { 
      this.isPlaying = false; 
     } 
    }); 
}; 

this.player = new window['YT'].Player("video-player", { events: { onStateChange } });