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?
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'; //<==== this one
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";
...
}
}
Takk @eric-martinez
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<string>;
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:
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);
}
}