在Ionic2应用程序中保存API url等设置的位置？ [英] Where to save settings like API url in Ionic2 app?

问题描述

我有几个设置应该在配置文件中。

I have several settings which should be in a configuration file.

例如：API的URL

For example: URL of APIs

Ionic 2中最佳位置在哪里？

Where is the best place for it in Ionic 2?

推荐答案

来自 Angular 2/4 Docs ：

非类依赖项

Non-class dependencies

如果依赖项值不是类，该怎么办？有时，
想要注入的东西是字符串，函数或对象。

What if the dependency value isn't a class? Sometimes the thing we want to inject is a string, function, or object.

应用程序通常定义大量的配置对象小
事实（如应用程序的标题或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) private 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应用程序中保存API url等设置的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！