全局变量Ionic 2

Question

我在使用Ionic 2和设置全局变量时遇到了一些困难。我的应用程序的结构如下：

Main app 
    | 
    |--- Page1 (Info) 
    |--- Page2 (Map) 
    |--- Page3 (List) 
     | 
     |--- ItemTabsPage 
       | 
       |---tab1 
       |---tab2 
       |---tab3 

我的目的是在显示列表页第三页，一旦一个项目被选中，以显示选项卡的附加信息。

我送从第3页的信息页面使用的标签：

itemTapped(event, item) { 
    this.nav.push(ItemTabsPage, { 
     item: item 
    }); 
    } 

的问题是，我不能做同样的送信息到子选项卡。我想根据选择的项目显示不同的信息。我试图限定注射globalVars.js到存储在变量中的值：

import {Injectable} from 'angular2/core'; 

@Injectable() 
export class GlobalVars { 

    constructor(myGlobalVar) { 
    this.myGlobalVar = ""; 
    } 

    setMyGlobalVar(value) { 
    this.myGlobalVar = value; 
    } 

    getMyGlobalVar() { 
    return this.myGlobalVar; 
    } 

} 

，然后更新itemTapped的代码列表中，如下所示：

itemTapped(event, item) { 
     this.nav.push(ItemTabsPage, { 
      item: item 
     }); 
     this.globalVars.setMyGlobalVar(item); 
     } 

然而，我总是得到同样的错误：

Uncaught EXCEPTION: Error during evaluation of "click" 
ORIGINAL EXCEPTION: TypeError: Cannot read property 'setMyGlobalVar' of undefined 

为第3页的代码是：

import {Page, NavController, NavParams} from 'ionic-angular'; 
import {ItemService} from '../services/ItemService'; 
import {ItemTabsPage} from '../item/item-tabs/item-tabs'; 
import {GlobalVars, setMyGlobalVar} from '../../providers/globalVars'; 

import {Http} from 'angular2/http'; 
import 'rxjs/add/operator/map'; 

@Page({ 
    templateUrl: 'build/pages/item-list/item-list.html', 
    providers: [ItemService] 
}) 

export class ItemListPage { 

    static get parameters() { 
    return [[NavController], [NavParams], [Http]]; 
    } 

    constructor(nav, navParams, http, globalVars) { 
    this.nav = nav; 
    // If we navigated to this page, we will have an item available as a nav param 
    this.selectedItem = navParams.get('item'); 
    this.http = http; 
    //this.items = null; 
    this.globalVars = globalVars; 


    this.http.get('https://website-serving-the-info.com/items.json').map(res => res.json()).subscribe(data => { 
     this.items = data.items; 
     }, 
     err => { 
      console.log("Oops!"); 
    }); 

    } 

    itemTapped(event, item) { 
    this.nav.push(ItemTabsPage, { 
     item: item 
    }); 
    this.globalVars.setMyGlobalVar(item); 
    } 
} 

任何人有任何建议吗？我离子安装：

Cordova CLI: 6.1.1 
Gulp version: CLI version 3.9.1 
Gulp local: Local version 3.9.1 
Ionic Framework Version: 2.0.0-beta.4 
Ionic CLI Version: 2.0.0-beta.25 
Ionic App Lib Version: 2.0.0-beta.15 
OS: Distributor ID: LinuxMint Description: Linux Mint 17.3 Rosa 
Node Version: v5.11.0 

Answer 1

你在正确的轨道上。其他一些答案也可以工作，但是Ionic团队建议您不要通过全局文件来使用全局变量。相反，他们建议使用Providers（正如你试图这样做）。

您提供者缺少实际的变量声明。

@Injectable() 
export class GlobalVars { 
    myGlobalVar: string = '' // this is the line you're missing 

    constructor(myGlobalVar) { 
     this.myGlobalVar = ""; 
    } 
} 

您还应该注意，您不会导出功能setMyGlobalVar()。您正在导出包含功能setMyGlobalVar()的类GlobalVars。

我相信，如果你做出这些改变，它应该工作。

编辑 我也很注意这行this.globalVars = globalVars;在您的Page3。这将导致每次创建Page3时重写您的globalVars。

Answer 2

在你的类ItemListPage，试试你的构造函数之前此静态参数方法：

static get parameters() { 
    return [[NavController], [NavParams], [Http], [GlobalVars]]; 
    } 

我以为你要设置你的globalVars变量在构造函数中“未定义”因此你不能在未定义的东西上调用函数。

Answer 3

我用最简单的方法是创建一个文件app/global.ts

export var global = { 
    myvar : 'myvar 01', 
    myfunction : function(msg) { 
     alert(msg); 
    } 
}; 

然后导入和其他类中自由使用：

import {global} from "../../global"; 

constructor() {   
    global.myfunction('test'); 
} 

，如果你想使用该全局以下组件HTML页面如下

export class HomePage { 
     Global: any = Global; 

现在它可用HTML格式如下

<div [style.display]="Global.splash ? 'flex': 'none'" >   

Answer 4

我有完全一样的情景，并想分享我的方法。

我的理解是，在ionic2中，注入是作为实例来实现的。这意味着每次你进入一个页面时，都会创建一个新的注入实例。

所以直接访问静态值不适合这里;你必须以某种方式缩小差距。

我的做法，就如同：

你是否还在为你的服务提供者定义一个静态值，但是你定义实例为值“吸气”和“二传手”。

在您的页面实现中，您将服务注入为构造函数的参数。

在构造函数中，您必须“新建”该服务的一个实例;并调用“getter”和“setter”。看到我的代码片段如下：

export class TransSender { 
    static _count:number = 0; 
    static _pushed:number = 0; 
    ... 

    public static setter(count:number, pushed:number,...) { 
     TransSender._count = count; 
     TransSender._pushed = pushed; 
    } 
    public get count(){ 
     return TransSender._count; 
    } 
    public get pushed(){ 
     return TransSender._pushed; 
    } 
    ... 
} 

我实际上是服务于以静态方式从后端获得价值提供静态集体制定者。

我的页面实现运行觉得这

import {TransSender} ...; 

@Component({ 
    templateUrl: 'build/pages/basics/basics.html', 
    providers: [TransSender] 
}) 

export class Page { 
    ... 
    constructor(tSender: TransSender,...) { 
     ... 
     tSender = new TransSender(); 
     TransSender.setter(1,2,3,4,5,6,7,8); 
     console.log(tSender.count); 
    } 
} 

在你的显示器（HTML）

，你会参考tSender而非TransSender

这可能看起来有点笨。但我找不到任何其他解决方案。

随着ionic2 Beta9的发布，bootstrap被重新引入到框架中。所以我正在探索新的可能性

欢呼

Answer 5

你似乎在ItemLisyPage错误注入GlobalVars提供商。