web-dev-qa-db-fra.com

Ionic 2 - Comment gérer les variables globales?

LA SITUATION:

Dans mon Ionic 2 application, j'ai un identifiant simple qui se trouve dans le menu de droite. Vous cliquez sur l'icône de droite dans l'en-tête - le menu avec le formulaire de connexion apparaît.

Le code de connexion est à l'intérieur du composant app.component et la vue de connexion est app.html. La connexion réussie définira une variable globale booléenne - loginState - sur true.

L'objectif est que chaque autre composant - importateur de la variable globale - puisse connaître cet état de connexion.

Le problème est que, après une connexion réussie, j'ai besoin de voir les modifications refléter immédiatement le composant homePage et ce n'est pas le cas.

Par exemple, sur la page d'accueil, certains contenus devraient immédiatement être disponibles après la connexion.

LE CODE:

C’est là que j’ai configuré la variable globale dans un fichier séparé nommé global.ts que j’ai ensuite importé dans d’autres composants:

export var global = {
    loginState : false
};

app.component:

Ceci est le composant de l'application où j'importe la variable globale et la définit sur true après une connexion réussie:

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

}

LA QUESTION:

Quelle devrait être la façon de procéder pour traiter les changements sur une variable globale se reflétant immédiatement sur d'autres composants?

Puis-je appeler une méthode de composant homePage à partir du composant app.component?

Merci!

angularionic-frameworkionic2
22
FrancescoMussi

Je pense que vous devez définir votre variable globale dans un service (fournisseur).

Comme ça:

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

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

Ensuite, vous déclarez ce service une seule fois dans le fichier 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 {}

Sur chaque page Ionic que vous utilisez, vous importez le service en haut de votre page mais ne le déclarez pas dans la partie @Component). déclarée (ou instanciée, ne sachant pas le bon vocabulaire ici) une seule fois avec app.module.ts, la valeur sera globale d'une page à l'autre:

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

Ensuite, dans votre modèle HTML (my-page.html ici) liée à une page spécifique (par le biais du @Component) que vous mettez conditionnée aux champs que vous souhaitez afficher si singleton.loginState == true.

39
nyluje