Angular -如何通过单击按钮来销毁动态组件

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-dynamic-component',
  template: `
    <button (click)="destroyComponent()">销毁组件</button>
  `,
})
export class DynamicComponent {
  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  destroyComponent() {
    // 获取动态组件的工厂类
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);

    // 创建组件实例并附加到视图中
    const componentRef = this.viewContainerRef.createComponent(componentFactory);

    // 销毁组件
    componentRef.destroy();
  }
}

@Component({
  selector: 'app-root',
  template: `
    <div #container></div>
  `,
})
export class AppComponent {
  @ViewChild('container', { read: ViewContainerRef }) viewContainerRef: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  createComponent() {
    // 获取动态组件的工厂类
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);

    // 创建组件实例并附加到视图中
    const componentRef = this.viewContainerRef.createComponent(componentFactory);
  }
}