在Ionic2应用程序中保存API url等设置的位置?

rak*_*ete 8 typescript ionic-framework ionic2 ionic3 angular

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

例如:API的URL

Ionic 2中最好的地方在哪里?

seb*_*ras 7

来自Angular 2/4文档:

非类依赖项

如果依赖值不是类,该怎么办?有时我们想要注入的东西是字符串,函数或对象.

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

为非类依赖项选择提供者令牌的一种解决方案是定义和使用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');
Run Code Online (Sandbox Code Playgroud)

什么OpaqueToken可能会让人感到困惑,但它只是一个字符串,可以在注入此对象时避免命名冲突.你可以在这里找到关于这个的惊人帖子.

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

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;
  }
}
Run Code Online (Sandbox Code Playgroud)

请注意如何将其包含在providers数组中

providers: [{ provide: MY_CONFIG_TOKEN, useValue: MY_CONFIG }]
Run Code Online (Sandbox Code Playgroud)

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

@Inject(MY_CONFIG_TOKEN) private config: ApplicationConfig
Run Code Online (Sandbox Code Playgroud)

UPDATE

OpaqueToken自v4.0.0以来已被弃用,因为它不支持类型信息,请InjectionToken<?>改用.

而不是这些线:

import { OpaqueToken } from '@angular/core';

// Create a config token to avoid naming conflicts
export const MY_CONFIG_TOKEN = new OpaqueToken('config');
Run Code Online (Sandbox Code Playgroud)

现在我们应该使用

import { InjectionToken } from '@angular/core';

// Create a config token to avoid naming conflicts
export const MY_CONFIG_TOKEN = new InjectionToken<ApplicationConfig>('config');
Run Code Online (Sandbox Code Playgroud)


jjy*_*pez -3

您可以使用 WebSQL 或 SQLite 表或 LocalStorage,因为 Ionic 和混合应用程序框架都很好地支持这两种方法。