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 文档:

非类依赖

如果依赖值不是一个类怎么办?有时我们的事情要注入的是字符串、函数或对象.

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;
  }
}

请注意如何将其包含在 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) 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屋！