Angular4中如何基于TypeScript枚举导出字符串数组？

你遇到的问题主要有两个核心原因：一是数组未初始化就直接赋值，二是导出方式不符合TypeScript/Angular的模块规范。下面一步步帮你解决：

问题分析 #

1. 数组未初始化：你仅声明了let ObjectStyles : string[];，但没有创建数组实例，此时ObjectStyles的值是undefined，运行时赋值自然会抛出TypeError。
2. 导出方式错误：export default需要对应无花括号的导入形式，和你想用import { ... }的需求不匹配；而直接export { ObjectStyles }时，数组还处于未初始化的undefined状态，导致运行时报错。

正确实现方案 #

方案一：初始化数组并导出常量 #

在你的app-options.service.ts中，先初始化数组，再为枚举对应的索引赋值，最后用export const导出：

export enum ContextMenus {
  // 保留你的其他枚举选项
  OBJECT_COLOR_RED = 120,
  OBJECT_COLOR_GREEN = 121,
  OBJECT_COLOR_BLUE = 122
}

// 先初始化空数组
export const ObjectStyles: string[] = [];

// 为枚举对应的索引赋值颜色值
ObjectStyles[ContextMenus.OBJECT_COLOR_RED] = '#f00';
ObjectStyles[ContextMenus.OBJECT_COLOR_GREEN] = '#0f0';
ObjectStyles[ContextMenus.OBJECT_COLOR_BLUE] = '#00f';

然后在组件中正常导入使用：

import { ContextMenus, ObjectStyles } from '../app-options.service';

// 示例使用
console.log(ObjectStyles[ContextMenus.OBJECT_COLOR_RED]); // 输出 "#f00"

方案二：用对象映射（更推荐，避免稀疏数组） #

如果不需要严格意义上的数组，只是想通过枚举值获取对应的颜色，用Record类型的对象会更安全，还能避免稀疏数组（索引从120开始，前面的元素都是undefined）的问题：

export enum ContextMenus {
  OBJECT_COLOR_RED = 120,
  OBJECT_COLOR_GREEN = 121,
  OBJECT_COLOR_BLUE = 122
}

// 使用Record类型约束，确保所有枚举值都被覆盖（开启strict模式时会自动检查）
export const ObjectStyleMap: Record<ContextMenus, string> = {
  [ContextMenus.OBJECT_COLOR_RED]: '#f00',
  [ContextMenus.OBJECT_COLOR_GREEN]: '#0f0',
  [ContextMenus.OBJECT_COLOR_BLUE]: '#00f'
};

组件中导入使用：

import { ContextMenus, ObjectStyleMap } from '../app-options.service';

console.log(ObjectStyleMap[ContextMenus.OBJECT_COLOR_GREEN]); // 输出 "#0f0"

为什么之前的方式不行？ #

• export default ObjectStyles：这种方式导出的是默认成员，导入时需要写成import ObjectStyles from '../app-options.service';，不能和ContextMenus一起用花括号导入，不符合你的需求。
• export { ObjectStyles }：当你这么写的时候，ObjectStyles还只是一个未初始化的变量（值为undefined），所以运行时会报错。

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