Angular4/Ionic3如何创建全局变量以复用API地址

嘿，我来帮你搞定这个全局变量的问题！在Ionic 3（基于Angular）里，有几种靠谱的方式可以让你一次性声明这两个API地址，之后在整个应用里直接调用，下面给你详细拆解：

方法一：创建全局配置服务（推荐，最符合Angular/Ionic最佳实践） #

这种方式依赖Angular的依赖注入系统，不仅能全局访问，后续如果要加环境切换、动态修改逻辑也很方便。

1. 首先生成一个配置服务：

ionic generate provider Config

2. 打开生成的src/providers/config/config.ts，把你的API地址定义为服务的公共属性：

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

@Injectable()
export class ConfigProvider {
  // 全局API地址
  public apiUrlPublic: string = 'http://localhost:8080/';
  public apiUrl: string = 'http://localhost:9999/api/';

  constructor() { }
}

3. 在src/app/app.module.ts里，把这个服务加入providers数组，这样整个应用都能注入使用：

import { ConfigProvider } from '../providers/config/config';

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

4. 在任意组件或服务里使用：

import { ConfigProvider } from '../providers/config/config';

constructor(private config: ConfigProvider) {
  // 直接调用全局变量
  console.log('公共API地址：', this.config.apiUrlPublic);
  console.log('主API地址：', this.config.apiUrl);
}

方法二：使用环境配置文件（适合区分开发/生产环境） #

如果你的API地址在开发和生产环境不一样，用环境文件会更方便。

1. 在src/environments目录下创建environment.ts（开发环境）和environment.prod.ts（生产环境）：

开发环境environment.ts：

export const environment = {
  production: false,
  apiUrlPublic: 'http://localhost:8080/',
  apiUrl: 'http://localhost:9999/api/'
};

生产环境environment.prod.ts：

export const environment = {
  production: true,
  apiUrlPublic: 'https://your-production-domain/public/',
  apiUrl: 'https://your-production-domain/api/'
};

2. 在需要的地方导入并使用：

import { environment } from '../../environments/environment';

// 直接访问
console.log(environment.apiUrlPublic);

方法三：创建全局常量文件（最简单的静态值方案） #

如果只是单纯的静态常量，不需要任何逻辑，直接建一个常量文件就行：

1. 在src/app目录下创建constants.ts：

// 全局API常量
export const API_URL_PUBLIC = 'http://localhost:8080/';
export const API_URL = 'http://localhost:9999/api/';

2. 在任意文件里导入使用：

import { API_URL_PUBLIC, API_URL } from '../constants';

console.log(API_URL);

小总结 #

• 如果你需要后续扩展逻辑（比如动态切换环境、修改地址），优先选方法一；
• 如果要区分开发/生产环境，方法二更省心；
• 只是简单的静态常量，方法三最直接。

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