Quelle est la meilleure façon de déclarer une variable globale dans Angular 2 / Typescript

Je voudrais que certaines variables soient accessibles partout dans un Angular 2 dans le langage Typescript . Quelle est la meilleure façon de procéder?

Voici la solution la plus simple sans Service ni Observer :

Placez les variables globales dans un fichier et exportez-les.

 // // ===== File globals.ts // 'use ssortingct'; export const sep='/'; export const version: ssortingng="22.2.2"; 

Pour utiliser des globales dans un autre fichier, utilisez une instruction import * as myGlobals from './globals'; : import * as myGlobals from './globals';

Exemple:

 // // ===== File heroes.component.ts // import {Component, OnInit} from 'angular2/core'; import {Router} from 'angular2/router'; import {HeroService} from './hero.service'; import {HeroDetailComponent} from './hero-detail.component'; import {Hero} from './hero'; import * as myGlobals from './globals'; //<==== this one export class HeroesComponent implements OnInit { public heroes: Hero[]; public selectedHero: Hero; // // // Here we access the global var reference. // public helloString: string="hello " + myGlobals.sep + " there"; ... } } 

Merci @ Eric-Martinez

J’aime aussi la solution de @supercobra. Je voudrais juste l’améliorer légèrement. Si vous exportez un object qui contient toutes les constantes, vous pouvez simplement utiliser es6 importer le module sans utiliser require .

J’ai également utilisé Object.freeze pour que les propriétés deviennent de véritables constantes. Si vous êtes intéressé par le sujet, vous pouvez lire ce post .

 // global.ts export const GlobalVariable = Object.freeze({ BASE_API_URL: 'http://example.com/', //... more of your variables }); 

Reportez le module en utilisant l’importation.

 //anotherfile.ts that refers to global constants import { GlobalVariable } from './path/global'; export class HeroService { private baseApiUrl = GlobalVariable.BASE_API_URL; //... more code } 

Un service partagé est la meilleure approche

 export class SharedService { globalVar:ssortingng; } 

Cependant, vous devez faire très attention lors de l’enregistrement pour pouvoir partager une seule instance pour l’ensemble de votre application. Vous devez le définir lors de l’enregistrement de votre application:

 bootstrap(AppComponent, [SharedService]); 

mais ne pas le redéfinir dans les atsortingbuts providers de vos composants:

 @Component({ (...) providers: [ SharedService ], // No (...) }) 

Sinon, une nouvelle instance de votre service sera créée pour le composant et ses sous-composants.

Vous pouvez regarder cette question concernant le fonctionnement de l’dependency injection et des injecteurs hiérarchiques dans Angular2:

  • Quelle est la meilleure façon d’injecter un service dans un autre en angular 2 (bêta)?

Vous pouvez noter que vous pouvez également définir des propriétés Observable dans le service pour notifier des parties de votre application lorsque vos propriétés globales changent:

 export class SharedService { globalVar:ssortingng; globalVarUpdate:Observable; globalVarObserver:Observer; constructor() { this.globalVarUpdate = Observable.create((observer:Observer) => { this.globalVarObserver = observer; }); } updateGlobalVar(newValue:ssortingng) { this.globalVar = newValue; this.globalVarObserver.next(this.globalVar); } } 

Voir cette question pour plus de détails:

  • Délégation: EventEmitter ou Observable dans Angular2

Voir par exemple Angular 2 – Implémentation de services partagés

 @Injectable() export class MyGlobals { readonly myConfigValue:ssortingng = 'abc'; } @NgModule({ providers: [MyGlobals], ... }) class MyComponent { constructor(private myGlobals:MyGlobals) { console.log(myGlobals.myConfigValue); } } 

ou fournir des valeurs individuelles

 @NgModule({ providers: [{provide: 'myConfigValue', useValue: 'abc'}], ... }) class MyComponent { constructor(@Inject('myConfigValue') private myConfigValue:ssortingng) { console.log(myConfigValue); } } 

Créer une classe Globals dans app / globals.ts :

 import { Injectable } from '@angular/core'; Injectable() export class Globals{ VAR1 = 'value1'; VAR2 = 'value2'; } 

Dans votre composant:

 import { Globals } from './globals'; @Component({ selector: 'my-app', providers: [ Globals ], template: `

My Component {{globals.VAR1}}

` }) export class AppComponent { constructor(private globals: Globals){ } }

Remarque : Vous pouvez append le fournisseur de services Globals directement au module au lieu du composant et vous n’aurez pas besoin d’append un fournisseur à chaque composant de ce module.

 @NgModule({ imports: [...], declarations: [...], providers: [ Globals ], bootstrap: [ AppComponent ] }) export class AppModule { } 

IMHO pour Angular2 (v2.2.3), le meilleur moyen consiste à append des services contenant la variable globale et à les injecter dans des composants sans la balise providers dans l’annotation @Component . De cette façon, vous pouvez partager des informations entre les composants.

Un exemple de service qui possède une variable globale:

 import { Injectable } from '@angular/core' @Injectable() export class SomeSharedService { public globalVar = ''; } 

Un exemple de composant qui met à jour la valeur de votre variable globale:

 import { SomeSharedService } from '../services/index'; @Component({ templateUrl: '...' }) export class UpdatingComponent { constructor(private someSharedService: SomeSharedService) { } updateValue() { this.someSharedService.globalVar = 'updated value'; } } 

Un exemple de composant qui lit la valeur de votre variable globale:

 import { SomeSharedService } from '../services/index'; @Component({ templateUrl: '...' }) export class ReadingComponent { constructor(private someSharedService: SomeSharedService) { } readValue() { let valueReadOut = this.someSharedService.globalVar; // do something with the value read out } } 

Notez que les providers: [ SomeSharedService ] ne doivent pas être ajoutés à votre annotation @Component . En ne ajoutant pas cette ligne, l’injection vous donnera toujours la même instance de SomeSharedService . Si vous ajoutez la ligne, une instance nouvellement créée est injectée.

Je ne connais pas le meilleur moyen, mais le plus simple si vous voulez définir une variable globale dans un composant est d’utiliser window variable de window pour écrire comme ceci:

window.GlobalVariable = "what ever!"

vous n’avez pas besoin de le transmettre à bootstrap ou de l’importer à d’autres endroits, et il est globalement accessible à tous les JS (pas seulement les composants angulars 2).

Je pense que le meilleur moyen est de partager un object avec des variables globales dans votre application en l’exportant et en l’important où vous voulez.

Commencez par créer un nouveau fichier .ts , par exemple, globals.ts et déclarez un object. Je lui ai donné un type d’ object mais vous pouvez aussi utiliser un type quelconque ou {}

 export let globalVariables: Object = { version: '1.3.3.7', author: '0x1ad2', everything: 42 }; 

Après cette importation

 import {globalVariables} from "path/to/your/globals.ts" 

Et l’utiliser

 console.log(globalVariables); 

J’aime la réponse de @supercobra, mais j’utiliserais déjà le mot-clé const tel qu’il est dans ES6:

 // // ===== File globals.ts // 'use ssortingct'; export const sep='/'; export const version: ssortingng="22.2.2"; 

C’est comme ça que je l’utilise:

global.ts

  export var server: ssortingng = 'http://localhost:4200/'; export var var2 : number = 2; export var var3 : ssortingng = 'var3'; 

pour l’utiliser simplement importer comme ça:

  import {Injectable} from "@angular/core"; import {Http, Headers, RequestOptions} from "@angular/http"; import {Observable} from "rxjs/Rx"; import * as glob from "../shared/global"; //<== HERE @Injectable() export class AuthService { private AuhtorizationServer = glob.server } 

EDITED: Supprimé "_" préfixé comme recommandé.