Angular中如何根据服务端返回uiSetting值实现组件运行时策略加载

实现思路 #

你要的功能可以直接用Angular原生的动态组件加载能力实现，完全不需要写大量ng-template分支判断，刚好匹配你现有的策略类设计，学习成本很低，适合新手快速落地。

具体实现步骤 #

1. 定义UI配置与组件的映射关系 #

首先把接口返回的uiSetting字符串和你已经写好的策略组件做一一映射：

// 导入你已有的基类和策略组件
import { BaseStrategy } from './base.strategy';
import { UiTypeOneStrategy } from './ui-type-one.strategy.component';
import { UiTypeTwoStrategy } from './ui-type-two.strategy.component';
import { UiTypeThreeStrategy } from './ui-type-three.strategy.component';

// 字符串到组件类的映射表
export const UI_STRATEGY_MAP: Record<string, typeof BaseStrategy> = {
  'ui-type-one': UiTypeOneStrategy,
  'ui-type-two': UiTypeTwoStrategy,
  'ui-type-three': UiTypeThreeStrategy
};

2. 实现宿主组件 #

这个组件作为动态加载的容器，接收uiType入参自动加载对应组件：

import { Component, Input, OnChanges, ViewChild, ViewContainerRef } from '@angular/core';
import { UI_STRATEGY_MAP } from './ui-strategy.map';

@Component({
  selector: 'base-strategy',
  template: `<ng-container #strategyContainer></ng-container>`
})
export class BaseStrategyComponent implements OnChanges {
  // 接收接口返回的uiSetting值
  @Input() uiType: string;
  // 获取容器引用，用来挂载动态组件
  @ViewChild('strategyContainer', { read: ViewContainerRef }) strategyContainer: ViewContainerRef;

  ngOnChanges(): void {
    // 入参非法或者无对应映射直接返回
    if (!this.uiType || !UI_STRATEGY_MAP[this.uiType]) return;
    
    // 清空之前加载的旧组件
    this.strategyContainer.clear();
    // 动态创建对应策略组件
    const componentRef = this.strategyContainer.createComponent(UI_STRATEGY_MAP[this.uiType]);

    // 【可选】给动态组件传输入参数
    // componentRef.instance.yourInputProp = yourData;
    // 【可选】监听动态组件的输出事件
    // componentRef.instance.yourOutputEvent.subscribe(event => { /* 处理逻辑 */ })
  }
}

3. 父组件中调用 #

你请求完接口拿到响应后，直接把uiSetting值传给组件即可：

<!-- 这里的uiSetting就是你接口返回的{"uiSetting":"xxx"}里的字段值 -->
<base-strategy [uiType]="apiResponse.uiSetting"></base-strategy>

注意事项 #

• 以上写法适配Angular 13及以上版本，如果你使用的是更低版本，只需要额外引入ComponentFactoryResolver来解析组件工厂，整体逻辑完全一致。
• 如果你使用NgModule管理组件，需要把所有策略组件加到对应NgModule的declarations数组中；如果是独立组件（standalone），不需要额外配置即可直接使用。
• 所有策略组件继承的BaseStrategy基类里可以封装公共逻辑，所有子类自动复用，符合策略模式的设计规范。

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