Angular同一个ngFor中渲染不同类型组件的实现方案咨询

针对你的场景，最通用、易维护且无性能损耗的实现方案如下：

方案1：*ngSwitch 条件渲染（推荐90%以上场景使用） #

这个方案直接在模板中做类型判断，组件的@Input和@Output绑定和常规使用完全一致，不需要额外改造：

• 第一步：给两类数据添加类型标识
  如果API返回的两类对象没有显式区分字段，你可以在拿到接口返回后先遍历数组，给每个对象加type标识：

  // 先定义两种数据的TS类型
  interface TypeA {
    type: 'a';
    // 类型A的独有字段
  }
  interface TypeB {
    type: 'b';
    // 类型B的独有字段
  }
  
  // 接口请求后预处理数据
  this.dataList = res.data.map(item => {
    if ('某A类独有字段' in item) {
      return {...item, type: 'a'};
    }
    return {...item, type: 'b'};
  })
  

• 第二步：模板中结合*ngFor和*ngSwitch渲染对应组件

  <ng-container *ngFor="let item of dataList">
    <ng-container [ngSwitch]="item.type">
      <!-- 渲染A类组件，正常绑定Input和Output -->
      <app-component-a
        *ngSwitchCase="'a'"
        [inputPropA]="item"
        (outputEventA)="handleAEvent($event)"
      ></app-component-a>
      <!-- 渲染B类组件，正常绑定Input和Output -->
      <app-component-b
        *ngSwitchCase="'b'"
        [inputPropB]="item"
        (outputEventB)="handleBEvent($event)"
      ></app-component-b>
    </ng-container>
  </ng-container>
  

方案2：动态组件加载（适合后续会扩展更多组件类型的场景） #

如果你的业务后续可能会新增更多类型的组件，为了避免模板代码不断膨胀，可以用Angular动态组件加载能力：

• 先建立类型标识和组件类的映射表
• 遍历数组时通过ViewContainerRef动态创建对应组件实例
• 手动给组件实例赋值@Input属性，订阅@Output事件即可

内容的提问来源于stack exchange，提问作者Amol Borkar