Wie kann ich eine globale Variable in Angular 2 / Typescript deklarieren?

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?

Jeff
Bearbeitete Frage 12. Mai 2019 в 1:01
Programmierung
angular typescript
22. März 2016 в 3:40
19 Aufrufe
Lösung

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'; //
snorkpete
Bearbeitete Antwort 6. Mai 2017 в 5:13
Kommentare (11)

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;
  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:

Community
Bearbeitete Antwort 23. Mai 2017 в 12:18
Kommentare (5)

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);
  }
}
Demodave
Bearbeitete Antwort 15. Februar 2018 в 2:46
Kommentare (8)