Quelle est la meilleure façon de déclarer une variable globale en Angular 2 / dactylographié [fermé]

j'aime aussi la solution de @supercobra. J'aimerais juste l'améliorer un peu. Si vous exportez un objet qui contient toutes les constantes, vous pouvez simplement utiliser es6 importer le module sans utiliser require .

j'ai aussi utilisé L'objet.figer pour faire les propriétés deviennent de vraies 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
 });

Consulter le module à l'aide d'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:string;
}

mais vous devez être très prudent 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 demande:

bootstrap(AppComponent, [SharedService]);

mais de ne pas le définir à nouveau dans les attributs providers de vos composants:

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

sinon une nouvelle instance de votre service sera créée pour la composante et ses sous-composantes.

vous pouvez jeter un oeil à cette question concernant la façon dont l'injection de dépendance et les injecteurs hiérarchiques fonctionnent en Angular2:

• Quelle est la meilleure façon d'injecter un service dans un autre en angle 2 (Beta)?

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

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

voir cette question pour plus de détails:

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

Voir, par exemple, Angulaire 2 - mise en Œuvre des services partagés

@Injectable() 
export class MyGlobals {
  readonly myConfigValue:string = '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:string) {
    console.log(myConfigValue);
  }
}

Créer une classe Globals 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: `<h1>My Component {{globals.VAR1}}<h1/>`
})
export class AppComponent {
    constructor(private globals: Globals){
    }
}

Note : vous pouvez ajouter Globals service provider directement au module au lieu du composant, et vous n'aurez pas besoin d'ajouter en tant que fournisseur à chaque composant de ce module.

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

IMHO for Angular2 (v2.2.3) la meilleure façon est d'ajouter des services qui contiennent la variable globale et de les injecter dans des composants sans la balise providers à l'intérieur de l'annotation @Component . Par cette façon, vous êtes en mesure de partager des informations entre les composants.

Un exemple de service qui propriétaire "de 1519120920" une variable globale:

import { Injectable } from '@angular/core'

@Injectable()
export class SomeSharedService {
  public globalVar = '';
}

import { SomeSharedService } from '../services/index';

@Component({
  templateUrl: '...'
})
export class UpdatingComponent {

  constructor(private someSharedService: SomeSharedService) { }

  updateValue() {
    this.someSharedService.globalVar = 'updated value';
  }
}

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