添加一个结束回调函数，在完成动画后销毁组件。

示例代码：

在组件的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() {
    // 销毁组件
  }

}