Angular 角度2：ngIf问题

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

canvas.ts

eventListener=[]；
公共addListener（名称：字符串，cb:函数）{
this.eventListener.push（{name:name，cb:cb}）；
}
公共dispatchEvent（名称：字符串，事件）{
var范围=此；
$.each（scope.eventListener，函数（键，值）{
if（value.name==name）{
cb值（事件）；
}
});
}

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

侦听的组件。ts

ngOnInit（）{
this.canvasHelper.addEventListener（'animationFinished'，（）=>this.handleAnimationEnd（））；
}
私有handleAnimationEnd（）{
this.isplay=false；
this.isPaused=false；
}

由于画布所在的组件和动画完成时应更新视图的组件是同级组件，因此有一个

canvasHelperService

处理这两个组件之间的通信

在侦听组件中，有一个ngIf结构，用于根据动画的当前状态（停止、完成、暂停、运行）切换按钮的外观。这由布尔变量

isPaused

和

isplay

以与此类似的方式处理：

播放图标
暂停图标

如果这两项都重置为

false

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

---

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

我猜更改检测对您来说不合适。

animationFinished

事件可能未在正确的区域中调度。要解决此问题，可以使用NgZone.run，如下所示：

---

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

我认为问题在于，使用

$时，事件侦听器回调没有在
NgZone
中运行。每个
。您可以使用默认的
Array.prototype.foreach
在侦听器中循环：

this.eventListener.forEach（listener=>{
if（listener.name==name）{
cb（事件）；
}
}

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