同一ngFor中不同类型的组件

在同一个ngFor中使用不同类型的组件可以通过使用动态组件的方式实现。

动态组件是指在运行时动态地创建和加载组件，而不是在编译时确定组件的类型。在Angular中，可以使用ComponentFactoryResolver来动态创建组件。

首先，在模板中定义一个占位符，用来动态加载组件：

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

然后，在组件中获取对应的组件工厂，通过调用createComponent方法创建组件实例，并将其附加到占位符上：

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);
  }
}

在调用createComponent方法时，传入不同的组件类型，就可以在同一个ngFor中创建不同类型的组件。

例如，可以定义两个组件：

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 {}

然后，在父组件中使用ngFor来动态创建这两个组件：

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

在父组件的代码中，可以通过数组componentTypes来定义要创建的组件类型：

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];
}

这样，就可以在同一个ngFor中动态地创建不同类型的组件了。

关于动态组件的更多信息，请参考Angular文档。