typescript - variable - constantes en angular 4

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

Question

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

Answer 1

Aquí está la solución más simple sin Service ni 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 globals en otro archivo, use una declaración 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

Answer 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: Se dejó caer "_" con el prefijo recomendado.

Answer 3

Cree la clase Globals 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 {
}

Answer 4

Creo que la mejor manera es compartir un objeto con variables globales a lo largo de su aplicación exportándolo e importándolo donde 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);

Answer 5

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 etiqueta de providers dentro de la anotación @Component . 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 los providers: [ SomeSharedService ] no deben 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.

Answer 6

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"; 

Answer 7

No sé la mejor manera, pero la manera más fácil si desea definir una variable global dentro de un componente es usar la variable de window 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).

Answer 8

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 post .

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

Answer 9

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.

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 propiedades Observable 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

Answer 10

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