Ich möchte, dass einige Variablen überall in einem "Angular 2" in der Sprache "Typescript" zugänglich sind. Wie sollte ich vorgehen, um dies zu erreichen?
Hier ist die einfachste Lösung ohne Service
und Observer
:
Lege die globalen Variablen in eine Datei und exportiere sie.
//
// ===== File globals.ts
//
'use strict';
export const sep='/';
export const version: string="22.2.2";
Um globale Variablen in einer anderen Datei zu verwenden, benutze eine import
Anweisung:
import * as myGlobals from './globals';
Beispiel:
//
// ===== 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";
...
}
}
Danke @eric-martinez
Ein gemeinsamer Dienst ist der beste Ansatz
export class SharedService {
globalVar:string;
}
Aber Sie müssen bei der Registrierung sehr vorsichtig sein, um eine einzige Instanz für Ihre gesamte Anwendung freigeben zu können. Sie müssen dies bei der Registrierung Ihrer Anwendung definieren:
bootstrap(AppComponent, [SharedService]);
aber nicht erneut in den providers
-Attributen Ihrer Komponenten definieren:
@Component({
(...)
providers: [ SharedService ], // No
(...)
})
Andernfalls wird eine neue Instanz Ihres Dienstes für die Komponente und ihre Unterkomponenten erstellt.
Sie können einen Blick auf diese Frage werfen, wie Dependency Injection und hierarchische Injektoren in Angular2 funktionieren:
Sie können feststellen, dass Sie auch "beobachtbare" Eigenschaften im Service definieren können, um Teile Ihrer Anwendung zu benachrichtigen, wenn sich Ihre globalen Eigenschaften ändern:
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);
}
}
Siehe diese Frage für weitere Details:
Siehe zum Beispiel 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);
}
}
oder einzelne Werte angeben
@NgModule({
providers: [{provide: 'myConfigValue', useValue: 'abc'}],
...
})
class MyComponent {
constructor(@Inject('myConfigValue') private myConfigValue:string) {
console.log(myConfigValue);
}
}