web-dev-qa-db-ja.com

Ionic 2-グローバル変数を管理する方法

状況：

Ionic 2アプリでは、右側のメニューにフォームが含まれる簡単なログインがあります。ヘッダーの右側のアイコンをクリックすると、ログインフォームのメニューが表示されます。

ログインコードはapp.component内にあり、ログインビューはapp.htmlです。ログインに成功すると、ブール値のグローバル変数loginStateがtrueに設定されます。

目的は、他のすべてのコンポーネント（グローバル変数のインポート）がそのログイン状態を認識できるようにすることです。

問題は、ログインが成功した後、変更がすぐにhomePageコンポーネントに反映されることを確認する必要があることですが、そうではありません。

たとえば、ホームページの特定のコンテンツは、ログイン後にすぐに利用可能になります。

コード：

これは、私がglobal.tsという名前の別のファイルにグローバル変数を設定する場所です。その後、他のコンポーネントにインポートします。

export var global = {
    loginState : false
};

app.component：

これは、グローバル変数をインポートし、ログイン成功後に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コンポーネントメソッドを呼び出すことはできますか？

ありがとうございました！

angularionic-frameworkionic2
22
FrancescoMussi

サービス（プロバイダー）でグローバル変数を定義する必要があると思います。

そのように：

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

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

次に、app.module.tsファイルでそのサービスを1回だけ宣言します。

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

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

使用する各Ionicページで、ページの最上部にサービスをインポートしますただし、@ 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){} 
}

次に、特定のページ（@Component経由）にリンクされたHTMLテンプレート（my-page.html）に、singleton.loginState == trueの場合に表示するフィールドに条件を設定します。

39
nyluje