angular2：ngIf problems

Question

カンバスの現在のアニメーションが終了するたびにキャンバスクラス（typescriptでビルドされ、実際の角度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アニメーションが完了したときにビューを更新する必要があります。兄弟コンポーネントである場合、これらの2つの通信を処理するcanvasHelperServiceがあります。

リスニングコンポーネントには、アニメーションの現在のステータス（停止、終了、一時停止、実行中）に応じてボタンの外観を切り替えるngIf構造があります。これは、これまでsimmilar方法のboolean変数isPausedとisPlayingによって処理されます：

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

これらは初期状態が復元される必要がありfalseの両方にリセットされた場合。これは実際にはすべて正常に動作します。ただし、キャンバス上にマウスを置くとすぐに再生アイコンが表示されるようにボタンをリセットするだけで、これが起こる理由はわかりません。

ngIfにキャンバス（イベントを送出しているコンポーネントの一部）の上にカーソルを置かなくても、現在のアニメーション状態に即座に反応させるにはどうすればよいですか？

Answer 1

変更検出が正しく動作しないようです。 animationFinishedイベントは、正しいNgZoneでディスパッチされないことがあります。ここに示したように、この問題を解決するには、NgZone.runを使用することができます。

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

https://angular.io/docs/ts/latest/api/core/index/NgZone-class.htmlはまたあなたのEventDispatcherが（それはangular2の依存性注入機構を介して作成されていますとき、それは通常です）NgZone内に作成されていることを確認してください。

Answer 2

$.eachを使用すると、イベントリスナーコールバックがNgZoneで実行されていないという問題があると思います。デフォルトのArray.prototype.foreachを使用して、リスナーを順番に調べることができます。

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