同一ngFor中不同类型的组件

<ng-template #componentContainer></ng-template>

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

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

  constructor(private resolver: ComponentFactoryResolver) {}

  createComponent(componentType: any) {
    // 清空容器中已有的组件
    this.container.clear();

    // 创建组件工厂
    const factory = this.resolver.resolveComponentFactory(componentType);

    // 创建组件实例并添加到容器中
    const componentRef = this.container.createComponent(factory);
  }
}

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

@Component({
  selector: 'app-component-a',
  template: `<h1>Component A</h1>`
})
export class ComponentAComponent {}

@Component({
  selector: 'app-component-b',
  template: `<h1>Component B</h1>`
})
export class ComponentBComponent {}

<div *ngFor="let componentType of componentTypes">
  <app-dynamic-component></app-dynamic-component>
</div>

import { Component } from '@angular/core';
import { ComponentAComponent } from './component-a.component';
import { ComponentBComponent } from './component-b.component';

@Component({
  selector: 'app-parent-component',
  template: `
    <div *ngFor="let componentType of componentTypes">
      <app-dynamic-component></app-dynamic-component>
    </div>
  `
})
export class ParentComponent {
  componentTypes = [ComponentAComponent, ComponentBComponent];
}