全局變量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提供商。