Cuál es la mejor forma de declarar una variable global en Angular 2 / Typescript

Me gustaría que algunas variables estén accesibles en cualquier lugar en un Angular 2 en el lenguaje de Typescript . ¿Cuál es la mejor manera de hacer esto?

Aquí está la solución más simple sin Service ni Observer :

Coloque las variables globales en un archivo y expórtelos.

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

Para usar globales en otro archivo, use una statement de import * as myGlobals from './globals'; : import * as myGlobals from './globals';

Ejemplo:

 // // ===== 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"; ... } } 

Gracias @ eric-martinez

También me gusta la solución de @supercobra. Simplemente me gustaría mejorarlo un poco. Si exporta un objeto que contiene todas las constantes, puede simplemente usar es6 importar el módulo sin usar require .

También usé Object.freeze para hacer que las propiedades se convirtieran en constantes verdaderas. Si está interesado en el tema, podría leer esta publicación .

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

Consulte el módulo usando importación.

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

Un servicio compartido es el mejor enfoque

 export class SharedService { globalVar:string; } 

Pero debe tener mucho cuidado al registrarlo para poder compartir una sola instancia para toda su aplicación. Debe definirlo al registrar su aplicación:

 bootstrap(AppComponent, [SharedService]); 

pero no para definirlo nuevamente dentro de los atributos de los providers de sus componentes:

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

De lo contrario, se creará una nueva instancia de su servicio para el componente y sus subcomponentes.

Puedes echar un vistazo a esta pregunta sobre cómo funcionan la dependency injection y los inyectores jerárquicos en Angular2:

  • ¿Cuál es la mejor manera de inyectar un servicio en otro en angular 2 (Beta)?

Puede observar que también puede definir propiedades Observable en el servicio para notificar partes de su aplicación cuando cambien sus propiedades globales:

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

Vea esta pregunta para más detalles:

  • Delegación: EventEmitter u Observable en Angular2

Ver por ejemplo Angular 2 – Implementación de servicios compartidos

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

o proporcionar valores individuales

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

Crea la clase Globals en la aplicación / globals.ts :

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

En tu componente:

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

My Component {{globals.VAR1}}

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

Nota : Puede agregar el proveedor de servicios Globals directamente al módulo en lugar del componente, y no necesitará agregar como proveedor a cada componente en ese módulo.

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

En mi humilde opinión para Angular2 (v2.2.3), la mejor manera es agregar servicios que contengan la variable global e insertarlos en componentes sin la etiqueta de providers dentro de la anotación @Component . De esta forma, puede compartir información entre componentes.

Un servicio de muestra que posee una variable global:

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

Un componente de muestra que actualiza el valor de su variable global:

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

Un componente de muestra que lee el valor de su variable global:

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

Tenga en cuenta que los providers: [ SomeSharedService ] no deberían agregarse a su anotación @Component . Al no agregar esta línea, la inyección siempre le dará la misma instancia de SomeSharedService . Si agrega la línea, se inyecta una instancia recién creada.

No sé de la mejor manera, pero la forma más fácil si quiere definir una variable global dentro de un componente es usar la variable de window para escribir así:

window.GlobalVariable = "what ever!"

no necesita pasarlo al bootstrap ni importarlo en otros lugares, y es globalmente accesible para todos los JS (no solo para los componentes angulares 2).

Creo que la mejor manera es compartir un objeto con variables globales en toda la aplicación exportándolo e importándolo donde lo desee.

Primero crea un nuevo archivo .ts por ejemplo globals.ts y declara un objeto. Le di un tipo de Objeto pero también podría usar cualquier tipo o {}

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

Después de eso importarlo

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

Y úsala

 console.log(globalVariables); 

Me gusta la respuesta de @supercobra, pero usaría la palabra clave const como en ES6 ya disponible:

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

Esa es la forma en que lo uso:

global.ts

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

para usarlo simplemente importa así:

  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 } 

EDITADO: Droped "_" con el prefijo como se recomienda.