添加一个结束回调函数,在完成动画后销毁组件。
示例代码:
在组件的HTML模板中添加动画:
// 组件内容
在组件的TS文件中,定义动画和结束回调函数:
import { Component, OnInit } from '@angular/core';
import { trigger, transition, style, animate } from '@angular/animations';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css'],
animations: [
trigger('fade', [
transition(':leave', [
animate(300, style({opacity: 0}))
])
])
]
})
export class MyComponentComponent implements OnInit {
state: string = 'active';
constructor() { }
ngOnInit(): void {
}
onAnimationDone(event: any) {
if (event.toState === 'void') {
// 动画完成后,销毁组件
this.destroyComponent();
}
}
destroyComponent() {
// 销毁组件
}
}