我个人不喜欢使用 http.get 读取 config.json 文件处理配置信息的方法，即使必须有另一种方法只需包含并阅读代码中的 json 文件，既然我们使用 Angular2 和 Typescript，为什么不使用类、接口并以更奇特的方式来做呢？
接下来我将向您展示的内容可能看起来比一开始要复杂（尽管读完后您会发现它非常简单且易于理解），但是当我开始学习 Angular2 时，我看到了一个关于他们如何处理的示例配置文件 in the 依赖注入指南 https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#dependency-injection-tokens我在我开发的应用程序中遵循了这一点来处理配置信息（如 API 端点、默认值等）。
根据文档：
非类依赖
[...]
应用程序通常定义具有许多小配置对象
事实（例如应用程序的标题或 Web API 的地址
端点），但这些配置对象并不总是
班级。
为非类依赖项选择提供者令牌的一种解决方案
是定义和使用 OpaqueToken
因此，您需要定义一个包含 url 等的配置对象，然后是OpaqueToken以便能够在使用您的配置注入对象时使用它。
我将所有配置都包含在app-config.ts file
// Although the ApplicationConfig interface plays no role in dependency injection,
// it supports typing of the configuration object within the class.
export interface ApplicationConfig {
appName: string;
apiEndpoint: string;
}
// Configuration values for our app
export const MY_CONFIG: ApplicationConfig = {
appName: 'My new App',
apiEndpoint: 'http://www...'
};
// Create a config token to avoid naming conflicts
export const MY_CONFIG_TOKEN = new OpaqueToken('config');
What OpaqueToken一开始可能会令人困惑，但它只是一个字符串，可以避免注入该对象时的命名冲突。你可以找到一篇关于这个的精彩帖子here http://blog.thoughtram.io/angular/2016/05/23/opaque-tokens-in-angular-2.html.
然后，您只需将其包含在您需要的页面中，如下所示：
import { NavController } from 'ionic-angular/index';
import { Component, OpaqueToken, Injectable, Inject } from "@angular/core";
// Import the config-related things
import { MY_CONFIG_TOKEN, MY_CONFIG, ApplicationConfig } from 'app-config.ts';
@Component({
templateUrl:"home.html",
providers: [{ provide: MY_CONFIG_TOKEN, useValue: MY_CONFIG }]
})
export class HomePage {
private appName: string;
private endPoint: string;
constructor(@Inject(MY_CONFIG_TOKEN) private config: ApplicationConfig) {
this.appName = config.appName;
this.endPoint = config.apiEndpoint;
}
}
请注意如何将其包含在providers array
providers: [{ provide: MY_CONFIG_TOKEN, useValue: MY_CONFIG }]
以及如何告诉注入器应该如何获取配置对象的实例
@Inject(MY_CONFIG_TOKEN) config: ApplicationConfig
UPDATE
OpaqueToken自 v4.0.0 以来已被弃用，因为它不支持类型信息，请使用InjectionToken<?>反而。
所以代替这些行：
import { OpaqueToken } from '@angular/core';
// Create a config token to avoid naming conflicts
export const MY_CONFIG_TOKEN = new OpaqueToken('config');
现在我们应该使用
import { InjectionToken } from '@angular/core';
// Create a config token to avoid naming conflicts
export const MY_CONFIG_TOKEN = new InjectionToken<ApplicationConfig>('config');
