Hoe kan ik een globale variabele declareren in Angular 2 / Typescript?

Ik zou graag willen dat sommige variabelen overal toegankelijk zijn in een Angular 2 in de Typescript taal. Hoe moet ik dit bereiken?

Jeff
Bewerkte vraag 12de6 mei 2019 в 1:01
Programmering
angular typescript
22ste1 maart 2016 в 3:40
12 views
Oplossing

Hier is de eenvoudigste oplossing zonder Service of Observer:

Zet de globale variabelen in een bestand en exporteer ze.

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

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

Om globals in een ander bestand te gebruiken gebruik je een import statement: ```import * as myGlobals from './globals';````

Voorbeeld:


// 
// ===== 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
Bewerkt antwoord 6de5 mei 2017 в 5:13
Commentaren (11)

Een gedeelde dienst is de beste aanpak

export class SharedService {
  globalVar:string;
}

Maar je moet heel voorzichtig zijn bij het registreren om een enkele instantie te kunnen delen voor je hele applicatie. Je moet dit definiëren wanneer je je applicatie registreert:

bootstrap(AppComponent, [SharedService]);

maar niet opnieuw definiëren in de providers attributen van je componenten:

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

Anders zal een nieuwe instantie van je service worden aangemaakt voor de component en zijn subcomponenten.

Je kunt deze vraag bekijken over hoe dependency injection en hiërarchische injectors werken in Angular2:

U kunt opmerken dat u ook Observable eigenschappen in de service kunt definiëren om delen van uw applicatie op de hoogte te brengen wanneer uw globale eigenschappen veranderen:

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

Zie deze vraag voor meer details:

Community
Bewerkt antwoord 23ste1 mei 2017 в 12:18
Commentaren (5)

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

of geef individuele waarden

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

class MyComponent {
  constructor(@Inject('myConfigValue') private myConfigValue:string) {
    console.log(myConfigValue);
  }
}
Demodave
Bewerkt antwoord 15de3 februari 2018 в 2:46
Commentaren (8)