javascript - 全局变量Ionic 2

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

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

我的意图是在Page3中显示一个列表，一旦选择一项，就在选项卡中显示其他信息。

我使用以下命令将信息从第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

Page3的代码是：

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

有人有什么建议吗？我的Ionic安装是：

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

最佳答案

您走在正确的轨道上。其他一些答案也可以，但是Ionic小组建议您不要通过globals文件使用globals。相反，他们建议使用Providers（在您尝试这样做时）。

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

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

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

您还应该注意，您没有导出函数setMyGlobalVar()。您正在导出包含函数GlobalVars的类setMyGlobalVar()。

我相信，如果您进行了这些更改，它应该会起作用。

编辑
我还要注意您this.globalVars = globalVars;中的这一行Page3。每次创建globalVars时，这都会导致您的Page3重写。