如何在运行时调用angular组件？

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

@Component({
  selector: 'app-dynamic-component',
  template: `
    <ng-template #dynamicComponentContainer></ng-template>
    <button (click)="createComponent()">创建组件</button>
  `,
})
export class DynamicComponent {
  @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  createComponent() {
    // 步骤2：获取组件工厂
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(YourDynamicComponent);

    // 步骤3：创建组件实例
    const componentRef = this.container.createComponent(componentFactory);

    // 步骤4：注入数据（可选）
    componentRef.instance.propertyName = 'Value';

    // 如果需要监听组件的事件，可以通过componentRef.instance访问组件实例，然后订阅相应的事件

    // 步骤5：插入动态组件
    this.container.insert(componentRef.hostView);
  }
}