如何分离Angular Material Table列配置中的代码与数据，实现配置可导入

核心思路是把可序列化的纯配置和本地逻辑拆分，外部仅存储配置标识、展示参数等可序列化内容，组件内提前预定义所有通用逻辑的映射表，拿到外部配置后再把标识替换为实际执行函数即可。

1. 改造列配置为可序列化的纯数据结构 #

将原配置中的函数、动态逻辑部分替换为约定好的标识字段，改造后的配置可以直接序列化为JSON存储到外部文件或数据库，示例如下：

[
  {
    "columnDef": "position",
    "header": "No.",
    "cellRenderer": "plainField",
    "cellField": "position",
    "numberFilter": true,
    "footer": true,
    "footerValue": "Total"
  },
  {
    "columnDef": "name",
    "header": "Name",
    "cellRenderer": "plainField",
    "cellField": "name",
    "stringFilter": true,
    "filterListProvider": "allElementNames",
    "footer": false
  }
]

说明：

• 原动态cell渲染函数替换为cellRenderer（渲染器标识）和cellField（绑定的数据源字段）两个可序列化字段
• 原动态生成的filterList替换为filterListProvider（过滤数据来源标识）字段

2. 本地预定义通用逻辑映射表 #

在通用表格组件内部提前维护所有可能用到的逻辑映射，所有实际执行的逻辑都收拢在本地管理：

// 单元格渲染器映射，key对应配置中的cellRenderer字段
const CELL_RENDERERS: Record<string, (element: any, field?: string, params?: any) => string> = {
  // 普通字段直接取值格式化
  plainField: (element, field) => `${element[field]}`,
  // 可扩展其他通用渲染逻辑
  currency: (element, field) => `¥${element[field]?.toFixed(2) || '0.00'}`,
  date: (element, field) => new Date(element[field]).toLocaleDateString()
}

// 过滤列表数据源映射，key对应配置中的filterListProvider字段
const FILTER_LIST_PROVIDERS: Record<string, () => any[]> = {
  allElementNames: () => ELEMENT_DATA.map(x => x.name),
  allPositions: () => ELEMENT_DATA.map(x => x.position)
}

3. 组件内合并配置与本地逻辑 #

拿到外部导入的纯配置后，在组件初始化阶段将配置中的标识替换为实际执行函数，得到可用的完整列配置：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-common-table',
  templateUrl: './common-table.component.html'
})
export class CommonTableComponent implements OnInit {
  // 假设此处为从外部接口/JSON文件加载到的原始纯配置
  rawColumnConfig: any[] = [];
  columns: any[] = [];

  ngOnInit() {
    // 加工原始配置为完整可用的列配置
    this.columns = this.rawColumnConfig.map(config => {
      const processedConfig = { ...config };
      // 注入单元格渲染函数
      processedConfig.cell = (element: any) => {
        return CELL_RENDERERS[config.cellRenderer](element, config.cellField, config.renderParams);
      };
      // 注入过滤列表（如果配置了对应标识）
      if (config.filterListProvider) {
        processedConfig.filterList = FILTER_LIST_PROVIDERS[config.filterListProvider]();
      }
      return processedConfig;
    });
  }
}

扩展说明 #

• 遇到复杂自定义场景时，可以在纯配置中新增renderParams等扩展字段存储参数，本地渲染逻辑直接读取配置参数即可实现个性化渲染
• 所有逻辑收拢在本地管理，不需要动态执行字符串代码，没有安全风险，同时也便于统一维护迭代
• 如果需要支持多场景、多租户的个性化配置，只需要新增对应逻辑的映射标识即可，无需修改配置加载的核心逻辑

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