全局变量 Ionic 2

Question

我在使用 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

Answer 1

在您的 class ItemListPage 中，在您的构造函数之前尝试此静态参数方法：

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

我认为您正在将构造函数中的 globalVars 变量设置为 'undefined'，因此您不能对未定义的对象调用函数。

Answer 2

我使用的最简单的方法是创建一个文件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 3

我有完全相同的情况，并且想分享我的方法。

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

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

我的方法是这样的：

您仍然在服务提供商中定义了一个静态值，但您为该值定义了实例 "getter" 和 "setter"。

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

在构造函数中，你必须"new"一个服务的实例；并调用 "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;
   }
   ... 
}

我实际上为服务提供了一个静态集合setter，以静态方式从后端获取价值。

我的页面实现是这样运行的

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 4

您似乎在 ItemLisyPage 中错误地注入了 GlobalVars 提供程序。

Answer 5

你走在正确的轨道上。其他一些答案会起作用，但 Ionic 团队建议您不要通过全局文件使用全局变量。相反，他们建议使用 Providers（正如您尝试做的那样）。

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

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

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

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

的 class GlobalVars

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

编辑我还要注意你 Page3 中的这一行 this.globalVars = globalVars;。这将在每次创建 Page3 时重写您的 globalVars。

全局变量 Ionic 2

Global variables Ionic 2

javascript

variables

tabs

injectable

ionic2