如何在angular中删除动态组件？

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

@Component({
  selector: 'app-dynamic-component',
  template: `
    <div #container></div>
    <button (click)="removeComponent()">删除组件</button>
  `,
})
export class DynamicComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  createComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(YourDynamicComponent);
    const componentRef = this.container.createComponent(componentFactory);
  }

  removeComponent() {
    this.container.remove(0); // 删除第一个动态组件
  }
}