angular - Angular 2 Animation Callback .done，设置属性？

Question

假设我们有： <li *ngFor="let item of items" [@myTrigger]='state' (@myTrigger.start)="animStart($event)" (@myTrigger.done)="animDone($event)">{{ item }}</li>

和方法animDone：

animDetails: string;

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

在我看来{{ animDetails }}

奇怪的是，当 console.log('Ended!') 适当地触发时， animDetails 却没有。

第一个动画，什么都没有改变。第二个动画（通过单击按钮启动）“我完成了！” 在开始时立即触发，而不是 .done。

Answer 1

出于性能原因，AFAIK 动画在 Angulars 区域之外运行。

constructor(private cdRef:ChangeDetectorRef) {}

animDetails: string;

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

在 Angulars 区域内运行动画回调时出现问题。我认为它已经修复，但您的问题似乎另有说明，除非您没有使用最新的 Angular2 版本。