グローバル変数Ionic 2

Question

Ionic 2で問題があり、グローバル変数を設定しています。次のように私のアプリの構造は次のとおりです。

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

私の意図は、ページ3でリストを表示することで、一つのアイテムが選択されると、タブに追加情報を表示します。

は、私が使用してタブを持つページへ3ページから情報を送信します。

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

問題は、私は子供のタブに情報を送信するために同じことを行うことができないということです。どの項目が選択されているかによって異なる情報を表示したい。次のように

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

I常に、私は変数の値を格納するために注射globalVars.jsを定義しようとしています同じエラーが表示されます。

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

誰もが何か提案がありますか？マイイオンのインストールは次のとおりです。あなたのクラスItemListPageで

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をエクスポートしています。

これらの変更を行うと効果があると思います。

編集 Page3のこの行には、this.globalVars = globalVars;も注意してください。これにより、Page3が作成されるたびにglobalVarsの書き換えが行われます。

Answer 2

、あなたのコンストラクタの前に、この静的パラメータの方法を試してみてください。

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

私はあなたが「未定義の」にコンストラクタで変数あなたglobalVarsを設定していることを考えていますしたがって、定義されていないものに対して関数を呼び出すことはできません。

Answer 3

私が使用して最も簡単な方法は、次に、ファイルアプリ/ 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; 

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

：下の私のコードスニペットを参照してください。

私のページ実装を実行すると、あなたの表示（HTML）でこの

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

が好き、あなたは、これは少し愚かに見えるかもしれませんtSenderではなくTransSender

を参照します。まだ私は他の解決策を見つけることができません。

ionic2 Beta9のリリースでは、ブートストラップがフレームに再導入されました。私は新たな可能性あなたがItemLisyPageに誤っGlobalVarsプロバイダを注入するように見える

歓声

Answer 5

を模索しています。