A SITUAÇÃO:

No meu aplicativo Ionic 2, eu tenho um login simples, cujo formulário está contido no menu direito. Você clica no ícone direito no cabeçalho - aparecerá o menu com o formulário de login.

O código de login está dentro do app.component e a visualização de login é app.html. O login bem-sucedido definirá uma variável global booleana - loginState - como true.

O objetivo é que todos os outros componentes - importando a variável global - possam conhecer esse estado de login.

O problema é que, após um login bem-sucedido, preciso ver as alterações imediatamente refletidas no componente homePage, e esse não é o caso.

Por exemplo, na página inicial, determinado conteúdo deve ficar imediatamente disponível para você após o login.

O CÓDIGO:

É aqui que eu configuro a variável global em um arquivo separado chamadoglobal.ts que eu importo em outros componentes:

export var global = {
    loginState : false
};

app.component:

Este é o componente do aplicativo em que importo a variável global e a defino como verdadeira após o login bem-sucedido:

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

}

A QUESTÃO:

Qual deve ser o caminho a seguir para lidar com as mudanças em uma variável global que são imediatamente refletidas em outros componentes?

Posso chamar um método de componente homePage do app.component?

Obrigado!