Come posso dichiarare una variabile globale in Angular 2 / Typescript? [chiuso]

Vorrei alcune variabili per essere accessibile ovunque in una Angular 2nella Typescriptlingua. Come devo fare per raggiungere questo obiettivo?

Ecco la soluzione più semplice senza Servicené Observer:

Metti le variabili globali in un file e esportale.

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

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

Per usare i globi in un altro file usa importun'istruzione: import * as myGlobals from 'globals';

Esempio:

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

         ...

        }
    }

Grazie @ eric-martinez

Mi piace anche la soluzione di @supercobra. Vorrei solo migliorarlo leggermente. Se si esporta un oggetto che contiene tutte le costanti, si può semplicemente utilizzare ES6 importazione del modulo senza l'utilizzo richiede .

Ho anche usato Object.freeze per trasformare le proprietà in vere costanti. Se sei interessato all'argomento, puoi leggere questo post .

// global.ts

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

Fare riferimento al modulo usando import.

//anotherfile.ts that refers to global constants
import { GlobalVariable } from './path/global';

export class HeroService {
    private baseApiUrl = GlobalVariable.BASE_API_URL;

    //... more code
}

Un servizio condiviso è l'approccio migliore

export class SharedService {
  globalVar:string;
}

Ma devi essere molto attento quando lo registri per poter condividere una singola istanza per l'intera applicazione. È necessario definirlo al momento della registrazione dell'applicazione:

bootstrap(AppComponent, [SharedService]);

ma non per definirlo di nuovo all'interno degli providersattributi dei componenti:

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

Altrimenti verrà creata una nuova istanza del servizio per il componente e i suoi componenti secondari.

Puoi dare un'occhiata a questa domanda su come funzionano l'iniezione di dipendenza e gli iniettori gerarchici in Angular2:

• Qual è il modo migliore per iniettare un servizio in un altro in angular 2 (Beta)?

Puoi notare che puoi anche definire Observableproprietà nel servizio per notificare parti dell'applicazione quando cambiano le proprietà globali:

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

Vedi questa domanda per maggiori dettagli:

• Delegazione: EventEmitter o Observable in Angular2

Vedere ad esempio Angolare 2 - Implementazione di servizi condivisi

@Injectable() 
export class MyGlobals {
  readonly myConfigValue:string = 'abc';
}

@NgModule({
  providers: [MyGlobals],
  ...
})

class MyComponent {
  constructor(private myGlobals:MyGlobals) {
    console.log(myGlobals.myConfigValue);
  }
}

o fornire valori individuali

@NgModule({
  providers: [{provide: 'myConfigValue', useValue: 'abc'}],
  ...
})

class MyComponent {
  constructor(@Inject('myConfigValue') private myConfigValue:string) {
    console.log(myConfigValue);
  }
}

Crea la classe Globals in app / globals.ts :

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

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

Nel tuo 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 : è possibile aggiungere il fornitore del servizio Globals direttamente al modulo anziché al componente e non sarà necessario aggiungere come fornitore a ogni componente di quel modulo.

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

IMHO per Angular2 (v2.2.3) il modo migliore è aggiungere servizi che contengono la variabile globale e iniettarli in componenti senza il providerstag all'interno @Componentdell'annotazione. In questo modo è possibile condividere informazioni tra i componenti.

Un servizio di esempio che possiede una variabile globale:

import { Injectable } from '@angular/core'

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

Un componente di esempio che aggiorna il valore della variabile globale:

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

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

  constructor(private someSharedService: SomeSharedService) { }

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

Un componente di esempio che legge il valore della variabile 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
  }
}

Nota che nonproviders: [ SomeSharedService ] dovrebbe essere aggiunto alla tua annotazione. Non aggiungendo questa riga, l'iniezione ti darà sempre la stessa istanza di . Se aggiungi la riga, viene iniettata un'istanza appena creata.@ComponentSomeSharedService

Non conosco il modo migliore, ma il modo più semplice se si desidera definire una variabile globale all'interno di un componente è usare la windowvariabile per scrivere in questo modo:

window.GlobalVariable = "what ever!"

non è necessario passarlo al bootstrap o importarlo in altri luoghi ed è accessibile globalmente a tutti i JS (non solo ai 2 componenti angolari).

Questo è il modo in cui lo uso:

global.ts

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

per usarlo basta importare così:

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
}

MODIFICATO: "_" eliminato con prefisso come raccomandato.

Penso che il modo migliore sia condividere un oggetto con variabili globali in tutta la tua applicazione esportandolo e importandolo dove vuoi.

Innanzitutto creare un nuovo file .ts , ad esempio globals.ts e dichiarare un oggetto. Gli ho dato un tipo di oggetto ma puoi anche usare un qualsiasi tipo o {}

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

Dopo di ciò importalo

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

E usalo

console.log(globalVariables);

Mi piace la risposta di @supercobra, ma vorrei usare la parola chiave const in quanto è già disponibile in ES6:

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

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