Comment créer des variables globales avec Angular ?

Le framework Angular se caractérise par une gestion modulaire des composants. Toutes les fonctionnalités du framework sont séparées en modules afin que vous n'utilisiez que ce dont vous avez besoin. C'est la même chose dans votre application : la répartition entre composants, modules et services permet de donner à chaque élément un rôle précis et d'avoir un code organisé. Il est cependant possible d'utiliser des variables globales, disponibles dans tous les composants d'une application et ayant la même valeur.

Pour stocker vos variables globales, vous devez utiliser une entité qui les contient. Cette classe sera ensuite réutilisée avec le système de gestion des dépendances d'Angular, "Angular dependency injection". Votre classe doit implémenter l'interface "Injectable" afin de pouvoir être utilisable comme une dépendance.

// variablesGlobales.ts
import { Injectable } from '@angular/core';
@Injectable()
export class VariablesGlobales {
  parametre: string = 'toto';
}

Vous pouvez ensuite y accéder depuis n'importe quel composant. Il suffit d'importer le fichier avec la directive "import" et de l'ajouter en paramètre du constructeur du composant.

// monComposant.component.ts
import { Component } from '@angular/core';
import { VariablesGlobales } from './variablesGlobales';
@Component({
  selector: 'bonjour',
  template: 'La valeur du paramètre est {{param.parametre}}',
  providers: [VariablesGlobales ] //Cette directive est à enlever si vous voulez pouvoir modifier la variable, vous le verrez dans le paragraphe suivant.
})
export class HelloComponent {
  constructor(private param: VariablesGlobales) {}
}

Si vous souhaitez pouvoir modifier la valeur de la variable globale, alors le traitement diffère légèrement. La classe doit utiliser le modèle du singleton, qui consiste à retourner la même instance de la classe, quel que soit l'objet qui l'appelle. On peut de cette manière n'avoir qu'une variable globale à laquelle tous les composants ont accès. Modifier sa valeur la change pour tous les composants de l'application. Angular permet heureusement de faire facilement cette modification. Il faut déclarer votre classe comme étant un fournisseur ("Provider" dans le framework). Dans le fichier "AppModule" qui configure votre application, ajoutez votre classe à la liste des "providers", dans la directive "@NgModule", après avoir importé la classe. Vous ne devez plus le déclarer comme un fournisseur dans les différents composants de votre application, il faut supprimer la classe de la directive "providers" de vos autres fichiers.

import { Globals } from './globals'
@NgModule({
  ...
providers: [
    // ... autres fournisseurs globaux
    VariablesGlobales // pensez à bien enlever la classe des autres directives "providers" contenues dans les autres fichiers
  ]
})