¿Cómo puedo declarar una variable global en Angular 2 / Typecript? [cerrado]

Me gustaría que algunas variables para que sea accesible por todos lados en una Angular 2en el Typescriptlenguaje. ¿Cómo debo hacer para lograr esto?

Aquí está la solución más simple w o / Serviceni Observer:

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

//
// ===== File globals.ts    
//
'use strict';

export const sep='/';
export const version: string="22.2.2";    

Para usar globales en otro archivo, use una importdeclaración: 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 (**Updated**)

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. Solo me gustaría mejorarlo un poco. Si exporta un objeto que contiene todas las constantes, simplemente puede usar es6 para importar el módulo sin usar require .

También usé Object.freeze para hacer que las propiedades se conviertan en constantes verdaderas. Si está interesado en el tema, puede 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 utilizando 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 providersatributos de sus componentes:

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

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

Puede echar un vistazo a esta pregunta sobre cómo funcionan la inyección de dependencia 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 Observablepropiedades en el servicio para notificar partes de su aplicación cuando cambian sus propiedades globales:

export class SharedService {
  globalVar:string;
  globalVarUpdate:Observable<string>;
  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);
  }
}

Crear clase global en app / globals.ts :

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

Injectable()
export class Globals{
    VAR1 = 'value1';
    VAR2 = 'value2';
}

En su componente:

import { Globals } from './globals';

@Component({
    selector: 'my-app',
    providers: [ Globals ],
    template: `<h1>My Component {{globals.VAR1}}<h1/>`
})
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á agregarlo como proveedor a cada componente de 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 inyectarlos en componentes sin la providersetiqueta dentro del@Component anotación. De esta manera, 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 providers: [ SomeSharedService ]debe no ser añadido a su @Componentanotación. 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é la mejor manera, pero la manera más fácil si desea definir una variable global dentro de un componente es usar una windowvariable para escribir así:

window.GlobalVariable = "what ever!"

no necesita pasarlo a bootstrap o importarlo a otros lugares, y es accesible globalmente a todos los JS (no solo a los componentes angulares 2).

Así es como lo uso:

global.ts

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

para usarlo solo 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 recomendado.

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

Primero cree un nuevo archivo .ts , por ejemplo globals.ts y declare 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 importalo

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

Y úsalo

console.log(globalVariables);

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

//
// ===== File globals.ts    
//
'use strict';

export const sep='/';
export const version: string="22.2.2";