如何不使用*ngIf在Angular中条件性选择组件

需求背景 #

遍历messages数组，根据message.type动态渲染对应的组件，避免使用多个*ngIf进行类型判断。

实现方案 #

利用Angular的ViewContainerRef和组件映射表，动态创建并渲染对应组件，无需在模板中写重复的条件判断。

1. 模板代码

每个消息项对应一个空的模板容器，用于动态注入组件：

<div *ngFor="let message of messages">
  <ng-template #messageContainer></ng-template>
</div>

2. 组件类代码

import { Component, QueryList, ViewChildren, ViewContainerRef, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Message1Component } from './message-1.component';
import { Message2Component } from './message-2.component';

// 定义消息类型接口
interface Message {
  type: number;
  // 其他消息属性，比如content等
  content: string;
}

@Component({
  selector: 'app-message-list',
  templateUrl: './message-list.component.html',
})
export class MessageListComponent implements OnInit, OnChanges {
  // 示例消息数组
  messages: Message[] = [
    { type: 1, content: '类型1的消息内容' },
    { type: 2, content: '类型2的消息内容' },
    { type: 1, content: '另一条类型1的消息' },
  ];

  // 核心：类型与组件的映射表
  private componentMap = {
    1: Message1Component,
    2: Message2Component,
    // 新增类型时只需在这里添加对应组件即可
  };

  // 获取所有消息容器的引用
  @ViewChildren('messageContainer', { read: ViewContainerRef }) 
  private messageContainers!: QueryList<ViewContainerRef>;

  ngOnInit(): void {
    // 初始化渲染组件
    this.renderComponents();
  }

  // 监听messages变化，数据更新时重新渲染
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['messages']) {
      this.renderComponents();
    }
  }

  // 动态创建组件的核心方法
  private renderComponents(): void {
    // 先清空所有容器，避免重复渲染
    this.messageContainers.forEach(container => container.clear());

    // 遍历消息和对应容器，创建组件
    this.messages.forEach((message, index) => {
      const container = this.messageContainers.get(index);
      if (!container) return;

      // 根据类型获取对应的组件类
      const TargetComponent = this.componentMap[message.type];
      if (!TargetComponent) return;

      // 创建组件实例
      const componentRef = container.createComponent(TargetComponent);
      // 传递消息数据到组件的输入属性
      componentRef.instance.message = message;
    });
  }
}

注意事项 #

• 组件注册：如果使用Angular 14+的独立组件，需确保Message1Component和Message2Component设置standalone: true；若为非独立组件，需在模块的declarations和entryComponents（Angular <9版本）中注册。
• 异步数据处理：如果messages是从API异步获取的，需在数据加载完成后调用renderComponents()，或通过ngOnChanges监听数据变化。
• 扩展性：新增消息类型时，只需在componentMap中添加类型与组件的映射关系，无需修改模板，符合开闭原则。

方案优势 #

• 模板代码简洁，避免大量重复的*ngIf条件判断
• 逻辑集中在TS文件，维护更方便
• 新增类型无需修改模板，扩展性强

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