Javascript 全局变量2

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

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

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

我的目的是在第3页显示一个列表，一旦选择了一个项目，就在选项卡中显示其他信息

我使用以下方式将信息从第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;
  }

}

然后更新列表中点击的项目代码，如下所示：

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

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页的代码为：

有人有什么建议吗？我的爱奥尼亚安装是：

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

---

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

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

---

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

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

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

---

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

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

---

我使用的最简单的方法是创建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'" >         

---

我有完全相同的场景，并且希望分享我的方法

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

因此，直接访问静态值不适合这里；你必须设法弥合这一差距

我的做法如下：

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

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

在构造函数中，必须“新建”服务实例；并称之为“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的发布，引导被重新引入到框架中。所以我正在探索新的可能性

---

干杯

我有完全相同的场景，我想分享我的方法

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

因此，直接访问静态值不适合这里；你必须设法弥合这一差距

我的做法如下：

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

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

在构造函数中，必须“新建”服务实例；并称之为“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的发布，引导被重新引入到框架中。所以我正在探索新的可能性

---

干杯

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

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

您走的是正确的道路。其他一些答案也可以，但爱奥尼亚团队建议您不要通过globals文件使用globals。相反，他们建议使用

提供者

（正如您正在尝试的那样）

您的提供程序缺少实际的变量声明

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

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

还应注意，您没有导出函数

setMyGlobalVar（）

。您正在导出类

globalvar

，该类包含函数

setMyGlobalVar（）

我相信如果你做出这些改变，它应该会起作用

编辑

---

我还要小心这一行

this.globalVars=globalVars第3页中的code>。这将导致每次创建
Page3
时都会重写您的
globalVars
。
您的思路正确。其他一些答案也可以，但爱奥尼亚团队建议您不要通过globals文件使用globals。相反，他们建议使用
提供者
（正如您正在尝试的那样）

您的提供程序缺少实际的变量声明

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

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

您还应该注意，您没有导出函数
setMyGlobalVar（）
。您正在导出类
globalvar
，该类包含函数
setMyGlobalVar（）

我相信如果你做出这些改变，它应该会起作用

编辑
我还要小心这一行
this.globalVars=globalVars第3页中的code>。这将导致每次创建
Page3
时都会重写您的
globalVars
。
感谢您的answ