如何动态添加Angular组件内容？

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

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

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  addComponent() {
    // 获取要动态添加的组件的工厂
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(YourDynamicComponent);

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

    // 设置组件属性
    componentRef.instance.property = 'value';

    // 可以通过componentRef来操作动态添加的组件，例如订阅事件等
  }
}