Angular中已知组件选择器为变量时加载指定组件的最佳方法

核心方案：使用NgComponentOutlet实现动态组件渲染 #

这个方案完全可以替代冗余的*ngIf判断，后续新增回合类型不需要修改模板代码，符合开闭原则。

第一步：定义组件映射关系 #

在父组件parent.component.ts中维护回合类型和对应组件的映射表：

import { Component, Type } from '@angular/core';
import { RoundNormalComponent } from './round-normal/round-normal.component';
import { RoundSongComponent } from './round-song/round-song.component';
import { RoundImageComponent } from './round-image/round-image.component';

// 回合类型定义
type RoundType = 'NORMAL' | 'SONG' | 'IMAGE';

// 回合类型与组件的映射表，新增回合仅需要在此加一行
const ROUND_COMPONENT_MAP: Record<RoundType, Type<any>> = {
  NORMAL: RoundNormalComponent,
  SONG: RoundSongComponent,
  IMAGE: RoundImageComponent
}

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  roundType: RoundType = 'NORMAL';
  // 当前需要渲染的回合组件
  get currentRoundComponent() {
    return ROUND_COMPONENT_MAP[this.roundType];
  }
  // 可选：需要传给回合组件的公共参数，比如当前回合的题目、素材数据
  currentRoundData = {
    questions: [],
    timer: 30
  }
}

第二步：简化父组件模板 #

替换原来的一堆*ngIf判断，直接通过NgComponentOutlet渲染对应组件：

<div>
  <!-- 基础用法，无参数传递 -->
  <!-- <ng-container *ngComponentOutlet="currentRoundComponent"></ng-container> -->

  <!-- 进阶用法：传递输入参数 -->
  <ng-container 
    *ngComponentOutlet="currentRoundComponent; inputs: { roundData: currentRoundData }"
  ></ng-container>
</div>

事件回调处理 #

如果需要监听子组件的输出事件（比如用户选完答案的回调），可以用两种方式实现：

• 公共服务注入：在父组件和所有回合组件中注入同一个回合状态服务，通过服务的RxJS Subject收发事件
• 注入回调函数：通过ngComponentOutlet的injector参数把父组件的回调方法注入到子组件中

扩展方式 #

后续新增回合类型只需要两步：

1. 开发新的回合组件
2. 在ROUND_COMPONENT_MAP中新增对应类型和组件的映射即可，不需要修改任何模板代码

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