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

您正在手动实例化和销毁组件，而不是让角度框架处理该组件，从而处理它的动画。你没有得到假动画，因为你破坏了它（它已经消失了）组件。

修改

您不必立即销毁组件，而是必须清除函数触发离开动画并使用回调(@fadeInOut.done)="animationDone($event)"来销毁组件。

Answer 2

您将动画绑定在section标签上，而不是组件宿主本身。因此，动画会在淡入时触发。它们（component和section）一起实例化。但是当您销毁组件时，section标签会随之被销毁，并且动画将不起作用（section上的动画仅在标签直接销毁时才会起作用）。你毁了它的父母。尝试使用@Hostbinding装饰器将动画绑定在组件宿主本身上，或者销毁section本身，然后在动画之后，使用animation end事件销毁组件。

角动态组件动画离开不起作用

2 个答案: