Comment puis-je déclarer une variable globale dans Angular 2 / Typescript? [fermé]

Je voudrais certaines variables soient accessibles partout dans un Angular 2dans la Typescriptlangue. Comment dois-je procéder pour y parvenir?

Voici la solution la plus simple sans Serviceni Observer:

Mettez les variables globales dans un fichier et exportez-les.

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

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

Pour utiliser des globaux dans un autre fichier, utilisez une importinstruction: import * as myGlobals from 'globals';

Exemple:

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

         ...

        }
    }

Merci @ eric-martinez

J'aime aussi la solution de @supercobra. Je voudrais juste l'améliorer légèrement. Si vous exportez un objet contenant toutes les constantes, vous pouvez simplement utiliser es6 importer le module sans utiliser require .

J'ai également utilisé Object.freeze pour que les propriétés deviennent de vraies constantes. Si le sujet vous intéresse, vous pouvez lire cet article .

// global.ts

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

Reportez-vous au module en utilisant l'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 son enregistrement pour pouvoir partager une seule instance pour l'ensemble de votre application. Vous devez le définir lors de l'enregistrement de votre candidature:

bootstrap(AppComponent, [SharedService]);

mais pas pour le redéfinir dans les providersattributs de vos composants:

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

Sinon, une nouvelle instance de votre service sera créée pour le composant et ses sous-composants.

Vous pouvez consulter cette question concernant le fonctionnement de l'injection de dépendances et des injecteurs hiérarchiques dans Angular2:

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

Vous pouvez remarquer que vous pouvez également définir des Observablepropriétés dans le service pour notifier certaines parties de votre application lorsque vos propriétés globales changent:

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 Observable dans Angular2

Voir par exemple Angular 2 - Implémentation de 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éez la classe Globals dans 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){
    }
}

Remarque : vous pouvez ajouter le fournisseur de services Globals 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 {
}

À mon humble avis pour Angular2 (v2.2.3), le meilleur moyen est d'ajouter des services contenant la variable globale et de les injecter dans les composants sans l' providersétiquette à l'intérieur de l' @Componentannotation. De cette manière, vous pouvez partager des informations entre les composants.

Un exemple de service qui possède une variable globale:

import { Injectable } from '@angular/core'

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

Un exemple de composant qui met à jour la valeur de votre variable globale:

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

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

  constructor(private someSharedService: SomeSharedService) { }

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

Un exemple de composant qui lit la valeur de votre variable globale:

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

Notez que cela neproviders: [ SomeSharedService ] doit pas être ajouté à votre @Componentannotation. En n'ajoutant pas cette ligne, l'injection vous donnera toujours la même instance de SomeSharedService. Si vous ajoutez la ligne, une instance fraîchement créée est injectée.

Je ne connais pas le meilleur moyen, mais le moyen le plus simple si vous souhaitez définir une variable globale à l'intérieur d'un composant est d'utiliser une windowvariable pour écrire comme ceci:

window.GlobalVariable = "what ever!"

vous n'avez pas besoin de le passer pour bootstrap ou l'importer ailleurs, et il est globalement accessible à tous les JS (pas seulement aux composants angular 2).

C'est comme ça que je l'utilise:

global.ts

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

pour l'utiliser, importez simplement comme ça:

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
}

MODIFIÉ: préfixé "_" comme recommandé.

Je pense que le meilleur moyen est de partager un objet avec des variables globales dans toute votre application en l'exportant et en l'important où vous le souhaitez.

Créez d'abord un nouveau fichier .ts par exemple globals.ts et déclarez un objet. Je lui ai donné un type d' objet mais vous pouvez également utiliser n'importe quel type ou {}

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

Après cela, importez-le

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

Et utilisez-le

console.log(globalVariables);

J'aime la réponse de @supercobra, mais j'utiliserais le mot-clé const car il est déjà disponible dans ES6:

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

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