如何在作为innerHtml加载的文档的子部分中动态加载Angular组件？

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

@Component({
  selector: 'app-parent-component',
  template: '<div #container></div>',
})
export class ParentComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver, private injector: Injector) {}

  loadComponent() {
    // 清空容器内容
    this.container.clear();

    // 获取组件工厂
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);

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

    // 设置组件属性
    componentRef.instance.data = 'Dynamic Component';

    // 获取组件视图
    const componentView = componentRef.hostView;

    // 将组件视图附加到容器元素中
    this.container.element.nativeElement.appendChild(componentView.rootNodes[0]);
  }
}

@Component({
  selector: 'app-dynamic-component',
  template: '<p>{{ data }}</p>',
})
export class DynamicComponent {
  data: string;
}