Angular中如何在对象间引用常量值以避免硬编码？

1. 直接导出常量对象（最简单可靠的方式） #

创建独立的常量文件（比如app.constants.ts），直接静态导出你的常量结构：

// app.constants.ts
export const MY_VARS = {
  MAX_LOGIN_ATTEMPTS: 5,
  DEFAULT_THEME: 'light'
};

export const ROLE_TYPES = [
  { value: 'admin', label: '管理员' },
  { value: 'user', label: '普通用户' },
  { value: 'guest', label: '访客' }
];

在组件中导入并赋值为类属性：

// 组件文件
import { MY_VARS, ROLE_TYPES } from './app.constants';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  readonly myVars = MY_VARS;
  readonly roleTypes = ROLE_TYPES;
}

模板里直接引用即可：

<!-- 模板文件 -->
<div>最大登录尝试次数：{{ myVars.MAX_LOGIN_ATTEMPTS }}</div>
<select>
  <option *ngFor="let role of roleTypes" [value]="role.value">{{ role.label }}</option>
</select>

这种方式是静态导出，Angular编译时会直接打包常量值，不会出现空值问题——之前函数返回的方式空值，大概率是因为函数被编译优化（tree-shaking）移除，或者执行时机未同步导致初始化失败。

2. 使用InjectionToken注入（适合依赖注入场景） #

如果需要在服务、指令等依赖注入环境中共享常量，用InjectionToken实现：

// app.constants.ts
import { InjectionToken } from '@angular/core';

export const MY_VARS = new InjectionToken<{ MAX_LOGIN_ATTEMPTS: number; DEFAULT_THEME: string }>(
  'MY_VARS',
  {
    providedIn: 'root',
    factory: () => ({
      MAX_LOGIN_ATTEMPTS: 5,
      DEFAULT_THEME: 'light'
    })
  }
);

export const ROLE_TYPES = new InjectionToken<Array<{ value: string; label: string }>>('ROLE_TYPES', {
  providedIn: 'root',
  factory: () => [
    { value: 'admin', label: '管理员' },
    { value: 'user', label: '普通用户' },
    { value: 'guest', label: '访客' }
  ]
});

在组件/服务中注入使用：

// 组件文件
import { Component, Inject } from '@angular/core';
import { MY_VARS, ROLE_TYPES } from './app.constants';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  constructor(
    @Inject(MY_VARS) public myVars: typeof MY_VARS,
    @Inject(ROLE_TYPES) public roleTypes: typeof ROLE_TYPES
  ) {}
}

模板用法和第一种方式一致，这种方式适合需要在测试中替换常量的场景。

3. 使用枚举（适合单一类型常量集合） #

如果常量是单一类型的键值对（比如角色标识），可以用枚举配合选项数组：

// app.enums.ts
export enum ROLE {
  ADMIN = 'admin',
  USER = 'user',
  GUEST = 'guest'
}

// 下拉选项单独导出
export const ROLE_TYPES = [
  { value: ROLE.ADMIN, label: '管理员' },
  { value: ROLE.USER, label: '普通用户' },
  { value: ROLE.GUEST, label: '访客' }
];

组件中既可以用枚举做逻辑判断，也可以用选项数组渲染下拉框：

import { ROLE, ROLE_TYPES } from './app.enums';

// 示例：判断用户角色
if (currentUser.role === ROLE.ADMIN) {
  // 执行管理员权限操作
}

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