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

Vorrei che alcune variabili fossero accessibili ovunque in un Angular 2 nel linguaggio Typescript. Come dovrei procedere per realizzare questo?

Jeff
Domanda modificata 12º maggio 2019 в 1:01
Programmazione
angular typescript
22º marzo 2016 в 3:40
37 visualizzazioni
Soluzione

Ecco la soluzione più semplice senza Service né Observer:

Metti le variabili globali in un file ed esportale.

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

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

Per usare le variabili globali in un altro file usate una dichiarazione import: 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'; //
snorkpete
Risposta modificata 6º maggio 2017 в 5:13
Commentari (11)

Un servizio condiviso è l'approccio migliore

export class SharedService {
  globalVar:string;
}

Ma bisogna stare molto attenti quando lo si registra per poter condividere una singola istanza per tutta l'applicazione. Devi definirlo quando registri la tua applicazione:

bootstrap(AppComponent, [SharedService]);

ma non definirlo di nuovo negli attributi providers dei tuoi componenti:

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

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

Puoi dare un'occhiata a questa domanda su come funzionano la dependency injection e gli iniettori gerarchici in Angular2:

Puoi notare che puoi anche definire proprietà Observable nel servizio per notificare parti della tua applicazione quando le tue proprietà globali cambiano:

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

Vedere questa domanda per maggiori dettagli:

Community
Risposta modificata 23º maggio 2017 в 12:18
Commentari (5)

Vedi per esempio https://stackoverflow.com/questions/35993778/angular-2-implementation-of-shared-services

-- language-all: lang-ts -->

@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);
  }
}
Demodave
Risposta modificata 15º febbraio 2018 в 2:46
Commentari (8)