在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> 

当我点击“播放”，在视频播放，但“暂停”按钮不会显示出来（“播放”按钮不会消失要么） 。

当我再次点击 - 未隐藏 - “播放”按钮时，视频继续播放，“播放”按钮被替换为“暂停”。所以这是第二次。

我GOOGLE了它已经，但没有找到一个解决方案：

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

Answer 1

我只是找到了解决办法。

进口NgZone

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

添加NgZone作为属性

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