单击按钮即可在ngfor中加载多个组件

<button (click)="loadComponents()">加载组件</button>

import { Component, ViewContainerRef, ComponentFactoryResolver, ComponentRef } from '@angular/core';
import { YourComponent } from './your-component.component';

@Component({
  selector: 'app-your-parent-component',
  template: `
    <button (click)="loadComponents()">加载组件</button>
    <ng-container #container></ng-container>
  `
})
export class YourParentComponent {
  components: ComponentRef<YourComponent>[] = [];

  constructor(private resolver: ComponentFactoryResolver, private container: ViewContainerRef) {}

  loadComponents() {
    // 清空已加载的组件
    this.clearComponents();

    // 循环加载组件
    for (let i = 0; i < 5; i++) {
      const factory = this.resolver.resolveComponentFactory(YourComponent);
      const componentRef = this.container.createComponent(factory);
      this.components.push(componentRef);
    }
  }

  clearComponents() {
    // 销毁已加载的组件
    this.components.forEach(componentRef => componentRef.destroy());
    this.components = [];
  }
}