Angular 4中如何全局访问常量文件无需重复导入？

嘿，这个需求太普遍了，我来给你分享几个在Angular 4里能实现全局常量无需重复导入的实用方案，都是实际项目里用过的：

这是最符合Angular设计理念的方式，通过模块的providers来注入全局可用的常量：

1. 先在你的常量文件（比如constants.ts）里导出常量对象：

export const APP_CONSTANTS = {
  API_URL: 'https://your-api-endpoint.com',
  MAX_RETRY_ATTEMPTS: 3,
  DEFAULT_PAGE_SIZE: 10
};

2. 打开你的根模块（AppModule）或者目标功能模块，在providers数组里添加一个值提供者：

import { NgModule } from '@angular/core';
import { APP_CONSTANTS } from './path/to/constants';

@NgModule({
  declarations: [/* 你的组件、指令 */],
  imports: [/* 导入的模块 */],
  providers: [
    { provide: 'AppGlobalConstants', useValue: APP_CONSTANTS }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 之后在任何服务或组件里，只需通过构造函数注入就能直接使用，不用再导入常量文件：

import { Injectable, Inject } from '@angular/core';

@Injectable()
export class DataService {
  constructor(@Inject('AppGlobalConstants') private globalConstants: any) {
    // 直接访问常量
    console.log('API地址:', this.globalConstants.API_URL);
  }
}

小贴士：如果想要类型提示，你可以给常量定义一个接口，把上面的any换成接口类型，这样写代码的时候更省心~

如果你的项目比较小，不想走依赖注入的流程，这个方法能快速实现，但会污染全局命名空间，大型项目谨慎使用：

1. 修改你的常量文件，把常量挂载到window对象上：

(window as any).APP_GLOBALS = {
  API_URL: 'https://your-api-endpoint.com',
  MAX_RETRY_ATTEMPTS: 3
};

2. 在main.ts里导入这个常量文件一次，确保应用启动时就加载：

import './path/to/constants';
// 其他main.ts的代码...
platformBrowserDynamic().bootstrapModule(AppModule);

3. 之后在任何服务或组件里，直接访问window.APP_GLOBALS就行，连导入都不用：

export class DataService {
  fetchData() {
    const apiUrl = (window as any).APP_GLOBALS.API_URL;
    // 发起请求...
  }
}

你也可以创建一个专门的单例服务来管理所有常量，这种方式不仅能全局访问，还能在服务里加一些逻辑（比如根据环境切换常量值）：

1. 创建一个ConstantsService：

import { Injectable } from '@angular/core';

@Injectable()
export class ConstantsService {
  // 用readonly确保常量不会被修改
  readonly API_URL = 'https://your-api-endpoint.com';
  readonly MAX_RETRY_ATTEMPTS = 3;
  readonly DEFAULT_LANG = 'en';

  // 还可以加方法处理常量
  getApiUrlWithPath(path: string) {
    return `${this.API_URL}/${path}`;
  }
}

2. 在根模块的providers里注册这个服务（Angular 4里这样就能保证单例）：

@NgModule({
  providers: [ConstantsService]
})
export class AppModule { }

3. 在需要的地方注入这个服务就能使用常量：

import { Injectable } from '@angular/core';
import { ConstantsService } from './constants.service';

@Injectable()
export class DataService {
  constructor(private constantsService: ConstantsService) {
    console.log('带路径的API地址:', this.constantsService.getApiUrlWithPath('users'));
  }
}

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