Angular:如何在字符串中动态添加组件到html中，并引导它？

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { MyDynamicComponent } from './my-dynamic-component';

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

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  addComponent() {
    // 创建动态组件实例
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyDynamicComponent);
    const componentRef = this.dynamicComponentContainer.createComponent(componentFactory);

    // 可以通过componentRef来访问和控制动态组件
    // 例如，可以给动态组件传递输入属性
    componentRef.instance.someInput = 'Some Value';

    // 可以订阅动态组件的输出事件
    componentRef.instance.someOutput.subscribe((event) => {
      console.log(event);
    });
  }
}

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-my-dynamic-component',
  template: `
    <h2>Dynamic Component</h2>
    <p>{{ someInput }}</p>
    <button (click)="emitOutput()">Emit Output</button>
  `,
})
export class MyDynamicComponent {
  @Input() someInput: string;
  @Output() someOutput = new EventEmitter();

  emitOutput() {
    this.someOutput.emit('Some Output');
  }
}