Ionic2/Angular2 - 读取自定义配置文件 [英] Ionic2/Angular2 - Read a custom config file

问题描述

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

I'm working on an ionic2 project and I need to create a new custom JSON config file. I found some tutorials to create one and access it through http.get but I think it's weird to call it through a get request. I want it in the root folder (where all the config JSONs are) and I open/read the file directly.

我不知道是否可行，甚至不知道是否推荐?这就是为什么我在这里发帖是为了有一些意见和解决方案:)

I don't know if it's possible, or even recommended ? This is why I'm posting here to have some opinions and solutions :)

谢谢

推荐答案

我个人不喜欢通过使用 http.get 方式读取 config.json 文件来处理配置信息，并且即使必须有另一种方法来只包含和读取代码中的 json 文件，因为我们使用的是 Angular2 和 Typescript，为什么不使用类、接口并以更奇特的方式来做呢?

Personally I don't like the read the config.json file by using the http.get way to handle configuration information, and even though there must be another way to just include and read the json file in your code, since we're using Angular2 and Typescript, why not using classes, interfaces and doing it in a more fancy way?

接下来我将向您展示的内容可能看起来比一开始更复杂(尽管阅读后您会发现它非常简单易懂)，但是当我开始学习 Angular2 时，我看到了一个示例，说明它们是如何处理的配置文件在依赖注入指南，我在处理配置信息(如 API 端点、默认值等)的应用程序中遵循了该指南.

What I'll show you next may seem more complicated than it should at first (although after reading it you will find it very straightforward and easy to understand), but when I started learning Angular2 I saw an example of how they handled config files in the Dependency Injection guide and I followed that in the apps I've worked on to handle config information (like API endpoints, default values, and so on).

根据文档:

非类依赖

[...]

应用程序通常定义具有许多小的配置对象事实(例如应用程序的标题或 Web API 的地址端点)，但这些配置对象并不总是班级.

Applications often define configuration objects with lots of small facts (like the title of the application or the address of a web API endpoint) but these configuration objects aren't always instances of a class.

为非类依赖选择提供者令牌的一种解决方案是定义和使用一个 OpaqueToken

One solution to choosing a provider token for non-class dependencies is to define and use an OpaqueToken

因此，您需要定义一个包含 url 等的配置对象，然后定义一个 OpaqueToken 以便在使用您的配置注入对象时能够使用它.

So you would need to define a config object with the urls and so on, and then an OpaqueToken to be able to use it when injecting the object with your configuration.

我在 app-config.ts 文件中包含了我的所有配置

I included all my configuration in the 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');

OpaqueToken 是什么一开始可能会令人困惑，但它只是一个字符串，可以在注入此对象时避免命名冲突.你可以在这里找到一篇精彩的帖子.

What OpaqueToken is may be confusing at first, but it just a string that will avoid naming conflicts when injecting this object. You can find an amazing post about this here.

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

Then, you just need to include it in the page you need it like this:

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

Please notice how to include it in the providers array

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

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

And how to tell the injector how it should obtain the instance of the config object

@Inject(MY_CONFIG_TOKEN) config: ApplicationConfig

<小时>

更新

OpaqueToken 自 v4.0.0 起已被弃用，因为它不支持类型信息，请改用 InjectionToken.

---

UPDATE

OpaqueToken has been deprecated since v4.0.0 because it does not support type information, use InjectionToken<?> instead.

所以，而不是这些行:

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 - 读取自定义配置文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！