¿Cómo puedo declarar una variable global en Angular 2 / Typescript?

Me gustaría que algunas variables fueran accesibles en todas partes en un Angular 2 en el lenguaje Typescript. Cómo debo hacer para lograr esto?

Jeff
Pregunta editada 12º mayo 2019 в 1:01
Programación
angular typescript
22º marzo 2016 в 3:40
120 vistas
Solución

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

Poner las variables globales en un archivo y exportarlas.

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

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

Para utilizar las globales en otro archivo, utilice una sentencia import: ``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'; //
snorkpete
Respuesta editada 6º mayo 2017 в 5:13
Comentarios (11)

Un servicio compartido es el mejor enfoque

export class SharedService {
  globalVar:string;
}

Pero hay que tener mucho cuidado al registrarlo para poder compartir una única instancia para toda tu aplicación. Tienes que definirlo cuando registres tu aplicación:

bootstrap(AppComponent, [SharedService]);

pero no volver a definirlo dentro de los atributos providers de tus 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 inyección de dependencia y los inyectores jerárquicos en Angular2:

Puedes notar que también puedes definir propiedades Observables en el servicio para notificar a partes de tu aplicación cuando tus propiedades globales cambien:

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:

Community
Respuesta editada 23º mayo 2017 в 12:18
Comentarios (5)

Véase, por ejemplo, https://stackoverflow.com/questions/35993778/angular-2-implementation-of-shared-services

idioma-todo: lang-ts -->

@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);
  }
}
Demodave
Respuesta editada 15º febrero 2018 в 2:46
Comentarios (8)