如何在列表angular 9中显示组件定义器

// example.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<p>这是一个动态组件</p>`
})
export class ExampleComponent {}

// app.component.ts
import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { ExampleComponent } from './example.component';

@Component({
  selector: 'app-root',
  template: `<ng-container #container></ng-container>`
})
export class AppComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

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

<!-- app.component.html -->
<ul>
  <li *ngFor="let item of items; let i = index">
    <ng-container #container></ng-container>
  </li>
</ul>

// app.component.ts
export class AppComponent {
  items = [1, 2, 3]; // 示例数据
  @ViewChildren('container', { read: ViewContainerRef }) containers: QueryList<ViewContainerRef>;

  ngAfterViewInit() {
    this.containers.changes.subscribe(() => {
      this.loadComponents();
    });
    this.loadComponents();
  }

  loadComponents() {
    this.containers.forEach((container, index) => {
      container.clear(); // 清除之前的组件
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ExampleComponent);
      container.createComponent(componentFactory);
    });
  }
}

import { ChangeDetectorRef } from '@angular/core';

constructor(private changeDetectorRef: ChangeDetectorRef) {}

addComponent() {
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ExampleComponent);
  const componentRef = this.container.createComponent(componentFactory);
  this.changeDetectorRef.detectChanges();
}

destroyComponent(componentRef) {
  componentRef.destroy();
}