Ionic 2 - 如何管理全局變量？

以我離子2的應用程序我有形式被包含在正確的菜單內的簡單的登錄。您點擊標題右側的圖標 - 將出現帶登錄表單的菜單。

登錄代碼位於app.component中，登錄視圖爲app.html。成功登錄將設置一個布爾全局變量 - loginState - 爲true。

目標是每個其他組件 - 導入全局變量 - 可以知道登錄狀態。

問題是，在成功登錄後，我需要看到立即反映在homePage組件上的變化，事實並非如此。

例如，在主頁上，某些內容在登錄後應立即變得可用。

守則：

這是我在一個名爲global.ts我再在其他組件導入一個單獨的文件設置的全局變量：

export var global = { 
    loginState : false 
};

應用。組件：

這是應用程序組件，其中我導入全局變量並在成功完成後將其設置爲true杜松子酒：

import {global} from "./global"; 

loginSubmit() 
{ 
    var email = this.loginForm.value.email.trim(); 
    var password = this.loginForm.value.password.trim(); 

    this.userService.submitLogin(email, password) 
     .subscribe((response) => { 
      if(response.result == 1) 
      { 
       global.loginState = true; 
       this.menu.close(); 
      } 
     }, (error) => { 
      console.log(error); 
     }); 

}

問題：

什麼應該是爲了應對上一個全局變量立即被變化反映了對其他組件進行的方式？

我可以從app.component調用homePage組件方法嗎？

謝謝！

來源

2016-11-28 johnnyfittizio

我認爲你需要在一個服務（aka Provider）中定義你的全局變量。

就像是：

import { Injectable } from '@angular/core'; 

@Injectable() 
export class SingletonService { 
    public loginState:boolean = false; 
}

然後你在app.module.ts文件中聲明該服務只有一次：

...other imports... 
import { SingletonService } from '../services/singleton/singleton'; 

@NgModule({ 
    declarations: [ 
    MyApp, 
    ... 
    ], 
    imports: [ 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    ... 
    ], 
    providers: [ 
    ... 
    SingletonService 
    ] 
}) 
export class AppModule {}

在您使用的每個離子頁面，輸入您在上面的服務的頁面，但不要在@Component部分中聲明它。因爲它已經被app.module聲明瞭（或者實例化，不確定正確的詞彙）。TS，該值將是全球性的從一個頁面到其他：

import {Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

import { SingletonService } from '../../services/singleton/singleton'; 
@Component({ 
    selector:'my-page', 
    templateUrl: 'my-page.html', 
}) 
export class MyPage { 
    constructor(public navCtrl: NavController,public singleton:SingletonService){} 
}

然後在你的HTML模板（my-page.html這裏）鏈接到一個特定的頁面（通了@Component）你把有條件的領域要顯示如果singleton.loginState == true。

來源

2016-11-28 11:47:00 nyluje

謝謝回答。我最後也有類似的情況。登錄成功後，我設置了這個。 SingletonService.loginState = true;如果日誌我可以看到它被正確設置爲true。但是在HomePage組件中並沒有體現出這種變化。 – johnnyfittizio

我還沒牛逼試圖執行你的具體情況，不過我見過不少帖子說建議使用服務進行全局變量在離子2 - 我敢肯定你會too-看到它，並開始使用它我。同樣到目前爲止，我沒有遇到需要將我的視圖更新爲全局變化的情況，就像您似乎在尋找的那樣。 – nyluje

對不起。你的回答是正確的。有我在執行它的一個錯誤，因爲在構造函數中有一個第二通道loginData：= singletonService.loginState這當然被稱爲只有一次。但是singletonService.loginState確實正確地反映了這些變化。無論是在視圖還是在邏輯上。謝謝！ – johnnyfittizio

離子3可以使用localStorage來執行此操作示例：

let page1Data = 'This is Page 1 Data'; 
localStorage.setItem('storedData': page1Data);

頁2

使用該數據在第2頁：

let page1Data = localStorage.getItem('storedData'); 
console.log(page1Data);

有關詳細信息：https://answerdone.blogspot.com/2018/03/how-to-store-and-use-data-globally-in.html

來源

2018-03-05 14:06:03

使用本地存儲在這種情況下並不理想。因爲你必須處理持久性的異步性質。所以這可能會使代碼無理由複雜化。 –

Ionic 2 - 如何管理全局變量？

回答

相關問題