Angular 2 Animation Callback .done, Eigenschaften einstellen?

Question

Sagen wir, wir haben: <li *ngFor="let item of items" [@myTrigger]='state' (@myTrigger.start)="animStart($event)" (@myTrigger.done)="animDone($event)">{{ item }}</li>

Und animDone Methode:

animDetails: string; 

animDone(event:any) { 
    console.log('Ended!'); 
    this.animDetails = 'I am done!'; 
} 

Nach Ansicht Ich habe {{ animDetails }}

Was während seltsam ist, console.log ('! Ended') feuert angemessen, animDetails nicht.

Die erste Animation, nichts wird verändert. Die zweite Animation (ausgelöst durch einen Klick auf einen Knopf), "Ich bin fertig!" feuert sofort beim Start, im Gegensatz zu .done.

Answer 1

AFAIK-Animationen werden aus Leistungsgründen außerhalb der Angulars-Zone ausgeführt.

constructor(private cdRef:ChangeDetectorRef) {} 

animDetails: string; 

animDone(event:any) { 
    console.log('Ended!'); 
    this.animDetails = 'I am done!'; 
    this.cdRef.detectChanges(); 
} 

Es gab ein Problem beim Ausführen von Animationsrückrufen innerhalb der Angulars-Zone. Ich nehme an, es wurde bereits behoben, aber Ihre Frage scheint etwas anderes zu bedeuten, außer wenn Sie nicht die neueste Angular2-Version verwenden.