Hvordan kan jeg erklære en global variabel i Angular 2 / Typescript?

Jeg ønsker at noen variabler skal være tilgjengelige overalt i en Angular 2 i Typescript-språket. Hvordan skal jeg gå frem for å oppnå dette?

Jeff
Redigerte spørsmål 12. mai 2019 в 1:01
Programmering
angular typescript
22. mars 2016 в 3:40
7 visninger
Løsning

Her er den enkleste løsningen uten Service eller Observer:

Legg de globale variablene i en fil og eksporter dem.

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

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

For å bruke globale variabler i en annen fil, bruk en import-setning: importer * som myGlobals fra './globals';

Eksempel:


// 
// ===== 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
Redigert svar 6. mai 2017 в 5:13
Kommentarer (11)

En delt tjeneste er den beste tilnærmingen

export class SharedService {
  globalVar:string;
}

Men du må være veldig forsiktig når du registrerer den for å kunne dele en enkelt instans for hele søknaden din. Du må definere det når du registrerer søknaden din:

bootstrap(AppComponent, [SharedService]);

men ikke definere det igjen i providers-attributtene til komponentene dine:

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

Ellers vil det opprettes en ny instans av tjenesten din for komponenten og dens underkomponenter.

Du kan ta en titt på dette spørsmålet om hvordan avhengighetsinjeksjon og hierarkiske injektorer fungerer i Angular2:

Du kan legge merke til at du også kan definere Observable egenskaper i tjenesten for å varsle deler av applikasjonen din når dine globale egenskaper endres:

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

Se dette spørsmålet for mer informasjon:

Community
Redigert svar 23. mai 2017 в 12:18
Kommentarer (5)

Se for eksempel https://stackoverflow.com/questions/35993778/angular-2-implementation-of-shared-services

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

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

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

eller oppgi individuelle verdier

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

class MyComponent {
  constructor(@Inject('myConfigValue') private myConfigValue:string) {
    console.log(myConfigValue);
  }
}
Demodave
Redigert svar 15. februar 2018 в 2:46
Kommentarer (8)