角2：ngIf問題

Question

我得到了一個角2項目中，一個帆布類（打造打字稿，但實際角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); 
      } 
     }); 
} 

的事件監聽器被登記在一個組件：

成分 - 即-listens.ts

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

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

作爲組分畫布是在和TH e動畫完成時應該更新視圖是兄弟組件，處理這兩者的通信有canvasHelperService。

在聆聽組件有一個ngIf結構來切換根據動畫的當前狀態的一個按鈕的外觀（停止，成品，暫停正在運行）。如果這些都重置爲false初始狀態應該恢復

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

：這是通過在simmilar方式布爾變量isPaused和isPlaying處理了這一點。這一切實際上工作得很好。但是，只有當我將鼠標懸停在畫布上時，它纔會重置按鈕以顯示播放圖標，並且我找不到發生這種情況的原因。

我怎麼能強迫ngIf立即作出反應，當前動畫狀態沒有我在畫布（組件調度事件的一部分）懸停？

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

或者檢查您此事件是NgZone內部創建（當它通過angular2依賴注入機制創造了它通常是這樣）。

Answer 2

我認爲問題在於，使用$.each時，您的事件偵聽器回調沒有在NgZone中運行。您可以使用默認Array.prototype.foreach循環聽衆：

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