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

Jeg vil gerne have, at nogle variabler skal være tilgængelige overalt i en Angular 2 i Typescript-sproget. Hvordan skal jeg gøre dette?

Jeff
Redigeret spørgsmål 2019ør maj 2019 в 1:01
Programmering
angular typescript
2016ør marts 2016 в 3:40
66 visninger
Løsning

Her er den enkleste løsning uden Service eller Observer:

Sæt de globale variabler i en fil og eksporter dem.

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

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

For at bruge globals i en anden fil skal du bruge en import-erklæring: import * as myGlobals from './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
Redigeret svar 2017ør maj 2017 в 5:13
Kommentarer (11)

En delt tjeneste er den bedste løsning

export class SharedService {
  globalVar:string;
}

Men du skal være meget forsigtig, når du registrerer den, så du kan dele en enkelt instans til hele din applikation. Du skal definere det, når du registrerer din applikation:

bootstrap(AppComponent, [SharedService]);

men du må ikke definere den igen i providers-attributterne for dine komponenter:

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

Ellers vil der blive oprettet en ny instans af din tjeneste for komponenten og dens underkomponenter.

Du kan tage et kig på dette spørgsmål vedrørende hvordan afhængighedsinjektion og hierarkiske injektorer fungerer i Angular2:

Du kan bemærke, at du også kan definere Observable-egenskaber i tjenesten for at give besked til dele af din applikation, når dine globale egenskaber ændres:

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ørgsmål for flere detaljer:

Community
Redigeret svar 2017ør maj 2017 в 12:18
Kommentarer (5)

Se f.eks. 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 angive individuelle værdier

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

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