Question

我正在开发一个ionic2项目，我需要创建一个新的自定义JSON配置文件。我发现了一些教程来创建一个并通过http.get访问它，但我认为通过get请求调用它是很奇怪的。我希望它在根文件夹（所有配置JSON都是）中，我直接打开/读取文件。

我不知道是否可能，甚至推荐？这就是为什么我在这里张贴以获得一些意见和解决方案:)

由于

Answer 1

我个人不喜欢使用http.get 方式读取config.json文件来处理配置信息，即使必须有另一种方法来只包含和在你的代码中读取 json文件，因为我们正在使用Angular2和Typescript，为什么不使用类，接口并以更花哨的方式进行呢？

接下来我会告诉你的内容可能比最初看起来要复杂得多（尽管在阅读之后你会发现它非常简单易懂）但是当我开始学习Angular2时，我看到了他们如何处理的一个例子Dependency Injection guide中的配置文件，我在我处理过的应用程序中处理配置信息（如API端点，默认值等）。

根据文件：

非类依赖

[...]

应用程序通常定义大量小的配置对象   事实（如应用程序的标题或Web API的地址   端点）但这些配置对象并不总是a的实例   类。

为非类依赖项选择提供程序标记的一种解决方案   是定义和使用OpaqueToken

因此，您需要使用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最初可能会让人感到困惑，但它只是一个字符串，可以在注入此对象时避免命名冲突。你可以找到关于这个here的精彩帖子。

然后，您只需要将它包含在您需要的页面中：

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数组

中

providers: [{ provide: MY_CONFIG_TOKEN, useValue: MY_CONFIG }]

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

@Inject(MY_CONFIG_TOKEN) config: ApplicationConfig

的更新

自v4.0.0以来，
OpaqueToken已弃用，因为它不支持类型信息，请改用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');

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

1 个答案:

的更新