Ansichten nach YouTube iFrame Ereignisse in Angular 2 aktualisieren

Question

Ich versuche YouTube iFrame API in angular2 zu verwenden, aber ich stoße auf ein Problem.

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

und dann

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

Rückrufe der Spieler die Behandlung von Ereignissen ausgeführt werden, aber Ansichten aktualisiert werden nicht. Hier

ist die Ansicht:

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

Wenn ich auf „Play“, die Videospiele, aber die Schaltfläche „Pause“ nicht zu sehen (die Taste „Play“ auch nicht verschwindet) .

Wenn ich noch einmal auf den - nicht versteckten - "Play" -Button klicke, wird das Video weiter abgespielt und der "Play" -Button wird durch "Pause" ersetzt. So funktioniert es das zweite Mal.

gegoogelt ich es schon, aber eine Lösung nicht finden:

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

Answer 1

Ich habe gerade die Lösung.

Import NgZone

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

hinzufügen NgZone als Eigenschaft

constructor(private ngZone: NgZone) {} 

Und dann

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