Ionic2/Angular2-读取自定义配置文件

我正在处理一个ionic2项目，需要创建一个新的自定义JSON配置文件。我找到了一些教程来创建一个并通过http.get访问它，但我认为通过get请求调用它很奇怪。我想把它放在根文件夹（所有配置JSON都在那里）中，然后直接打开/读取文件

我不知道这是否可能，甚至不知道是否推荐？这就是为什么我在这里发布一些意见和解决方案：）

---

感谢

我个人不喜欢使用http.get方式来读取config.json文件来处理配置信息，尽管必须有另一种方式来在代码中包含和读取json文件，但既然我们使用的是Angular2和Typescript，为什么不使用类、接口并以更奇特的方式来执行呢

接下来我将向您展示的内容可能比一开始看起来要复杂（尽管阅读后您会发现它非常简单易懂），但当我开始学习Angular2时，我看到了一个他们如何在中处理配置文件的示例，并且在我处理配置信息的应用程序中遵循了这个示例（如API端点、默认值等）

根据文件：

非类依赖关系

[……]

应用程序通常使用大量小数据定义配置对象 事实（如应用程序的标题或web API的地址 端点），但这些配置对象并不总是 班级

为非类依赖项选择提供者令牌的一种解决方案 是定义和使用不透明标记

因此，您需要使用URL等定义一个配置对象，然后定义一个

OpaqueToken

，以便在向对象注入配置时能够使用它

我将所有配置都包含在

app config.ts

文件中

// 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');

刚开始时，

OpaqueToken

可能会让人困惑，但它只是一个字符串，在注入此对象时可以避免命名冲突。您可以找到一篇关于此的精彩文章

然后，您只需将其包含在页面中，您需要它，如下所示：

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: [{ provide: MY_CONFIG_TOKEN, useValue: MY_CONFIG }]

以及如何告诉注入器应该如何获取配置对象的实例

@Inject(MY_CONFIG_TOKEN) config: ApplicationConfig

---

更新

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');

从'@angular/core'导入{InjectionToken}；
//创建配置令牌以避免命名冲突
export const MY_CONFIG_TOKEN=new InjectionToken（'CONFIG'）；

在阅读和阅读了不同的解决方案后，我最终使用了这个骇人的实现。希望很快会有一个不错的本机解决方案可用：

import { NgModule } from '@angular/core';
import { environment as devVariables } from './environment.dev';
import { environment as testVariables } from './environment.test';
import { environment as prodVariables } from './environment.prod';

export function environmentFactory() {
  const location = window.location.host;
  switch (location) {
    case 'www.example.org': {
      return prodVariables;
    }
    case 'test.example.org': {
      return testVariables;
    }
    default: {
      return devVariables;
    }
  }
}

@NgModule({
  providers: [
    {
      provide: 'configuration',
      useFactory: environmentFactory
    }
  ]
})
export class EnvironmentsModule {}

然后在需要的地方，例如：

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

import { AuthenticationService } from '../authentication';

@Injectable()
export class APIService {

  private http: Http;
  private apiURL: string;
  protected authentication: AuthenticationService;

  constructor(
    public injector: Injector,
    @Inject('configuration') public configuration: any
  ) {
    this.http = injector.get(Http);
    this.authentication = injector.get(AuthenticationService);
    this.apiURL = configuration.apiURL;    
  };

...

---

感谢您的清晰解释。我也确实更喜欢这种方法！很高兴我能提供帮助：）我非常喜欢它，但我如何处理依赖于环境的配置？假设您为生产系统使用不同的API端点。我可以在配置中指定“productionApiEndpoint”并检查angular应用程序中的环境设置，但这将向我的生产应用程序泄漏潜在的敏感数据，因为“developmentApident”也在配置中。我这样做是不推荐使用OpaqueToken的。