角度2：ngIf问题答案

【问题标题】：angular 2: ngIf problems角度2：ngIf问题
【发布时间】：2017-06-08 01:53:24
【问题描述】：

我有一个 angular 2 项目，其中一个画布类（在 typescript 中构建，但在实际的 angular 2 应用程序之外）会在画布上的当前动画完成时触发一个事件。这是由以下基本事件侦听器/调度器结构执行的：

canvas.ts

eventListener = [];

public addListener(name : string, cb : Function) {
        this.eventListener.push({name: name, cb : cb});
}

public dispatchEvent(name : String, event) {
        var scope = this;
        $.each(scope.eventListener, function(key, value){
            if(value.name == name) {
                value.cb(event);
            }
        });
}

事件监听器注册在一个组件中：

component-that-listens.ts

ngOnInit() {
    this.canvasHelper.addEventListener('animationFinished', () => this.handleAnimationEnd());
}

private handleAnimationEnd() {
    this.isPlaying = false;
    this.isPaused = false;
}

作为画布所在的组件和动画完成时应更新视图的组件是兄弟组件，有一个canvasHelperService 处理这两个组件的通信。

在监听组件中有一个 ngIf 结构，用于根据动画的当前状态（已停止、已完成、已暂停、正在运行）切换按钮的外观。这由布尔变量 isPaused 和 isPlaying 以类似的方式处理：

<span *ngIf="!isPlaying" (click)="play()">PLAY ICON</span>
<span *ngIf="isPlaying" (click)="pause()">PAUSE ICON</span>

如果这些都重置为false，则应恢复初始状态。这一切实际上都很好。但是，它只会在我将鼠标悬停在画布上时重置按钮以显示播放图标，我找不到发生这种情况的原因。

如何强制 ngIf 立即对当前动画状态做出反应，而无需将鼠标悬停在画布上（调度事件的组件的一部分）？

【问题讨论】：

标签： angular angular-ng-if

【解决方案1】：

我猜更改检测不适合您。 animationFinished 事件可能未在正确的 NgZone 中调度。要解决此问题，您可以使用 NgZone.run，如下所示：https://angular.io/docs/ts/latest/api/core/index/NgZone-class.html

ngOnInit() {
  this.canvasHelper.addEventListener('animationFinished', () =>
    this._ngZone.run(() => this.handleAnimationEnd()));
  }
}

或者检查你的 eventdispatcher 是在 NgZone 中创建的（通常是通过 angular2 依赖注入机制创建的）。

【讨论】：

【解决方案2】：

我认为问题在于，当使用 $.each 时，您的事件侦听器回调未在 NgZone 中运行。你可以使用默认的Array.prototype.foreach 来循环监听：

this.eventListener.forEach(listener => {
    if(listener.name == name) {
        listener.cb(event);
    }
}

【讨论】：