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

}

ВОПРОС:

Каким должен быть способ, чтобы иметь дело с изменениями в глобальной переменной, которые сразу отражаются на других компонентах?

Можно ли вызвать метод компонента homePage из app.component?

Спасибо!

Ответ 1

Я думаю, вам нужно определить свою глобальную переменную в службе (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 {}

На каждой используемой странице 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){} 
}

Затем в вашем html-шаблоне (my-page.html здесь), связанном с определенной страницей (через @Component), вы помещаете условие на поля, которые хотите отобразить, если singleton.loginState == true.

Ответ 2

В Ionic 3 вы можете использовать localStorage для выполнения этой операции Пример:

Page 1

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

Page 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