Question

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

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

我实际上不知道围绕这个问题的最佳做法是什么，并且在这个主题上找不到多少。

Answer 1

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

<强>服务

import {Injectable} from 'angular2/angular2';


@Injectable()
export class Config {

  constructor() {}

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

}

<强>的Bootstrap：

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

Answer 2

在the official Ionic 2 forum我发现你应该

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

这是因为Ionic没有使用与Angular 2相同的过程来引导您的应用，而 @App 装饰器不提供创建自动可用于所有人的单件服务的功能应用程序中的页面和组件;因此，合理的用途是在你的App.ts和你将要使用它的页面中注入你的服务......嗯，这种行为应该是行为...在我的情况下（我正在使用Ionic 2测试版5）这不起作用，如果你这样做，并将 @App 和你的 @Page 注入你的服务（导入它们并使用providers数组，它将会创建两个单独的服务，在我的情况下不太好，因为我在 App.ts 中为我的服务设置值并在我的某些页面中检索这些值。所以，如果你需要Singleton行为，我的方法是用这种方式使用ol'四种模式创建单身服务..

在您的服务中......

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

然后你需要在哪里使用它......

先导入

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

创建私有媒体资源以保存对您服务的引用

globals: Globals;

由于我们没有使用 @Injectable（），我们不应该在构造函数中注入我们的服务，但是让我们添加这一行来使用getInstance（）方法创建一个实例并将其分配给我们的私有属性。

this.globals = Globals.getInstance();

现在您可以将您的服务用作代码中的单身人士。

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刚刚发布，我的建议是你测试两者解决方案，首先是论坛中的解决方案，如果那个不起作用，这个解决方案对我有用，我希望它也可以让你的工作也适合你。

Answer 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();
    }

在Angular 2＆amp ;;中访问整个应用程序的关键数据离子2

3 个答案: