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我在配置文件的示例！＃dependency-injection-tokensrel =noreferrer>依赖注入指南，我在我用过的应用程序中处理了配置信息（如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).

根据文档：

非类依赖

Non-class dependencies

[...]

应用程序通常定义具有大量小
事实的配置对象（如标题应用程序或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;
  }
}

请注意如何将其包含在<$ c中$ c>供应商数组

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屋！