5

在 Angular 2 和 Ionic 2 中存储我可以在整个应用程序中访问的数据的最佳方式是什么 - 打字稿。

对于用户信息，我最初的想法是在需要的每个文件中导入 User 类，但由于我需要一个用户 ID，我认为最好有某种配置文件，也许是 App 类 -我也可以存储环境信息和网址等。

我实际上不知道围绕这个的最佳实践是什么，并且在这个话题上找不到太多。

4

3 回答 3

9

一种方法是使用您需要的所有属性创建类，并在引导应用程序时将其配置为单例。

服务：

import {Injectable} from 'angular2/angular2';


@Injectable()
export class Config {

  constructor() {}

  public get USERID(): string {
      return "XCAMPLISHIOUS";
  }

}

引导：

import {bootstrap} from 'angular2/angular2';
import {TaciIlieApp} from './app/taci-ilie';
import {Config} from './app/services/config/config';

bootstrap(TaciIlieApp, [Config]); // configuring the Config provider here will ensure a single instance is created

用法：

import {Component, Inject} from 'angular2/angular2';

import {Config} from '../../services/config/config';

@Component({
  selector: 'game',
  templateUrl: 'app/components/game/game.html',
  styleUrls: ['app/components/game/game.css'],
  providers: [],
  directives: [],
})
export class Game {


  constructor(private config: Config) {
      console.log(this.config.USERID);
  }
于 2016-01-15T17:52:20.167 回答
4

在官方 Ionic 2 论坛中，我发现您应该

将其注入@App 本身，然后将其导入@Page 以使用它。

这是因为 Ionic 没有使用与 Angular 2 相同的过程来引导您的应用程序，并且@App装饰器不提供创建可自动用于应用程序中所有页面和组件的单例服务的能力；因此，合乎逻辑的用途是将您的服务注入您的 App.ts 和您将要使用它的页面中......嗯，这应该是行为......在我的情况下（我正在使用 Ionic 2 beta 5）这不起作用，如果你这样做并将@App和你的@Page与你的服务一起注入（导入它们并使用提供者数组，它将创建两个单独的服务，在我的情况下不是那么好，因为我在App.ts中为我的服务设置值并在我的某些页面中检索这些值。所以，如果你需要单例行为，对我来说，我的方法是使用四人组模式创建一个单例服务。

在您的服务中...

export class Globals {

//----------------------------------------------------------------------------------------------
// Static (Singleton Implementation) Properties Section:
//----------------------------------------------------------------------------------------------
static instance         : Globals;
static isCreating       : Boolean = false;

//----------------------------------------------------------------------------------------------
// Private Properties Section:
//----------------------------------------------------------------------------------------------
private screenWidth     : number;
private screenHeight    : number;

//----------------------------------------------------------------------------------------------
// Constructor Method Section:
//----------------------------------------------------------------------------------------------
constructor()
{
    if (!Globals.isCreating)
    {
        throw new Error("No se puede llamar a esta clase con 'new' - Utiliza getInstance()");
    }
}


//----------------------------------------------------------------------------------------------
// (Singleton Implementation) getInstance() Method:
//----------------------------------------------------------------------------------------------
static getInstance() : Globals
{
    if (Globals.instance == null)
    {
        Globals.isCreating = true;
        Globals.instance = new Globals();
        Globals.isCreating = false;
    }

    return Globals.instance;
}


//----------------------------------------------------------------------------------------------
// Properties Section (ScreenWidth):
//----------------------------------------------------------------------------------------------
getScreenWidth() : number
{
    return this.screenWidth;
}
//----------------------------------------------------------------------------------------------
setScreenWidth(val) : void
{
    this.screenWidth = val;
}

//----------------------------------------------------------------------------------------------
// Properties Section (ScreenHeight):
//----------------------------------------------------------------------------------------------
getScreenHeight() : number
{
    return this.screenHeight;
}
//----------------------------------------------------------------------------------------------
setScreenHeight(val) : void
{
    this.screenHeight = val;
}}

然后，无论您需要在哪里使用它...

  1. 先导入

import {Globals} from './services/globals';

  1. 创建一个私有属性来保存对您的服务的引用

globals: Globals;

  1. 由于我们没有使用@Injectable()我们不应该在构造函数中注入我们的服务，但是让我们添加这一行以使用 getInstance() 方法创建一个实例并将其分配给我们的私有属性。
this.globals = Globals.getInstance();
  1. 现在您可以在代码中将您的服务用作单例。
ngOnInit()
{
    // Device Dimensions:
    let that : any = this;
    screensize.get().then((result) => {
        setTimeout(()=> {
            that.globals.setScreenWidth(result.width);
            that.globals.setScreenHeight(result.height);
        },50);
    },
    (error) => {
        // Do Nothing yet...
    });
}

我在解释我是如何做到这一点时有点冗长，因为我知道像我一样，还有很多开发人员仍然掌握 Ionic 2 和 Angular 2，学习一个平台需要花费大量时间并且遇到这样的问题您实际上可以花几天时间来弄清楚事情，我希望这个解决方案对您和顺便说一句，我知道它现在可能已经过时了，因为 Ionic 2 Beta 6 刚刚发布，我的建议是让您首先测试这两个解决方案论坛中的那个，如果那个不工作，这个对我有用，我希望它也能让你工作。

于 2016-04-27T17:51:06.887 回答
3

在 Ionic 2 beta 6 中使用提供者来保存全局数据对我有用，我相信这是 Angular 2 中的推荐做法。

从命令行生成提供程序：ionic g provider GlobalService注意生成的服务是如何装饰的@Injectable

在课堂上注入你的服务@App；你可以通过在 providers 数组中声明它来做到这一点： 

  @App({
        templateUrl: 'build/app.html',
              providers: [GlobalService] ,
              config: {} // http://ionicframework.com/docs/v2/api/config/Config/
            })

这将创建一个可在每个页面上访问的提供程序的单个实例。无论你需要在哪里使用它，不要在providers数组中声明，而是在Page的构造函数中声明：

@Page({
        templateUrl: 'build/pages/new-page/new-page.html',
      })
      export class NewPage{

       constructor(public globalService: GlobalService) {
    }

    someFunction(){
    this.globalService.someGlobalFunction();
    }
于 2016-05-10T15:16:45.583 回答