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

当我点击“播放”时，视频会播放，但“暂停”按钮没有出现（“播放”按钮也没有消失）。

当我再次单击未隐藏的“播放”按钮时，视频继续播放，“播放”按钮被“暂停”取代。所以它第二次起作用了。

我已经用谷歌搜索过了，但没有找到解决方案：

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