Анимация углового динамического компонента не работает

Question

Допустим, у меня есть следующий компонент, который я создал динамически.

@Component({
  template: `
    <template #alertContainer></template>
    <button (click)="clear()">clear</button>
    <button (click)="createComponent('success')">Create success alert</button>
  `,
})
export class App {
 @ViewChild("alertContainer", { read: ViewContainerRef }) container;
 componentRef: ComponentRef<any>;

  constructor(private resolver: ComponentFactoryResolver) {}

  clear() {
    this.componentRef.destroy();
  }

  createComponent(type) {
    const factory = this.resolver.resolveComponentFactory(AlertComponent);
    this.componentRef = this.container.createComponent(factory);
  }
}

И компонент AlertComponent:

@Component({
  template: `
    <section [@fadeInOut]>
     <h1>Alert</h1>
    <section>
  `,
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate(500, style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate(500, style({ opacity: 0 }))
      ])
    ])
  ],
})
export class AlertComponent {

}

Когда я создаю компонент, анимация работает, и я получаю ожидаемый эффект затухания.Когда я нажимаю кнопку очистки, которая уничтожает компонент, я не получаю никакого эффекта анимации.В чем проблема?

Answer 1

Вы создаете и уничтожаете компонент вручную, а не позволяете угловой структуре обрабатывать это и, следовательно, его анимацию.Вы не получаете анимацию выхода, потому что уничтожаете (он исчез) компонент.

edit

Вместо немедленного уничтожения компонента, вы можете очистить функциюзапустить анимацию выхода и использовать обратный вызов (@fadeInOut.done)="animationDone($event)" для уничтожения компонента.