angular - Ionic2 应用程序中的 API url 等设置在哪里保存？

Question

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

例如：API 的 URL

Ionic 2 的最佳位置在哪里？

Answer 1

来自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');

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

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

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

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

@Inject(MY_CONFIG_TOKEN) private config: ApplicationConfig

---

更新

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');

现在我们应该使用

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

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

Answer 2

将它们保存在类单例中（通常是反模式）或更好的命名空间等价物。

class Singleton {
    /* ... lots of singleton logic ... */
    public someMethod() { ... }
}

// Using
var x = Singleton.getInstance();
x.someMethod();

等效的命名空间

namespace Singleton {
    export function someMethod() { ... }
}
// Usage
Singleton.someMethod();
var x = Singleton; // If you need to alias it for some reason

Answer 3

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