angular 2: ngIf Probleme

Question

Ich habe ein angular 2-Projekt, bei dem eine Canvas-Klasse (in typescript, aber außerhalb der eigentlichen angular 2-Anwendung) ein Ereignis auslöst, sobald die aktuelle Animation auf der Leinwand beendet wurde. Dies wird durch die folgenden Grund Ereignis-Listener/Abfertiger Struktur durchgeführt:

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

der Ereignis-Listener wird in einer Komponente registriert:

Komponente-that-listens.ts

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

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

Als die Komponente ist die Leinwand in und th Wenn die Ansicht aktualisiert werden soll, wenn die Animation ausgeführt wird, sind die Geschwisterkomponenten canvasHelperService, die die Kommunikation dieser beiden verarbeiten.

In der Listening-Komponente gibt es eine ngIf-Struktur, um das Aussehen einer Schaltfläche entsprechend dem aktuellen Status der Animation (gestoppt, beendet, angehalten, ausgeführt) zu ändern. Dies wird durch die Booleschen Variablen isPaused und isPlaying in einer simmilar Weise diese behandelt:

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

Wenn diese beide zurückgesetzt false der Ausgangszustand wieder hergestellt werden soll. Das alles funktioniert wirklich gut. Allerdings setzt es nur die Schaltfläche zurück, um das Wiedergabesymbol zu zeigen, sobald ich über die Zeichenfläche schwebe, und ich kann keinen Grund finden, warum dies passieren würde.

Wie kann ich erzwingen, dass der ngIf sofort auf den aktuellen Animationszustand reagiert, ohne dass ich den Mauszeiger über die Zeichenfläche halten muss (Teil der Komponente, die das Ereignis absetzt)?

Answer 1

Ich denke, Änderungserkennung funktioniert nicht richtig für Sie. Das animationFinished Ereignis wird möglicherweise nicht in dem richtigen NgZone ausgelöst. Um dies zu beheben können Sie NgZone.run verwenden, wie hier gezeigt: https://angular.io/docs/ts/latest/api/core/index/NgZone-class.html

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

Alternativ überprüfen, ob Ihre Eventdispatcher innerhalb des NgZone erstellt wird (es ist in der Regel, wenn es durch die angular2 Dependency Injection-Mechanismus geschaffen wird).

Answer 2

Ich denke, das Problem ist, dass Ihre Ereignis-Listener-Callbacks nicht in NgZone ausgeführt werden, wenn Sie $.each verwenden. Sie könnten den Standard Array.prototype.foreach verwenden, um durch die Listener zu gehen:

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