我在使用 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
});
}
问题是我无法将信息发送到子选项卡。我想根据选择的项目显示不同的信息。我尝试定义一个可注入(inject)的 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
最佳答案
我使用的最简单的方法是创建一个文件 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'" >
关于javascript - 全局变量 Ionic 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36844411/