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

Ich möchte, dass einige Variablen überall Angular 2in der TypescriptSprache verfügbar sind. Wie soll ich das erreichen?

Hier ist die einfachste Lösung , w / o Servicenoch Observer:

Fügen Sie die globalen Variablen in eine Datei ein und exportieren Sie sie.

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

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

Verwenden Sie eine importAnweisung, um Globals in einer anderen Datei zu verwenden : 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 (**Updated**)

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

Ich mag auch die Lösung von @supercobra. Ich möchte es nur leicht verbessern. Wenn Sie ein Objekt exportieren, das alle Konstanten enthält, können Sie das Modul einfach mit es6 importieren, ohne require zu verwenden .

Ich habe auch Object.freeze verwendet, um die Eigenschaften zu wahren Konstanten zu machen. Wenn Sie sich für das Thema interessieren, können Sie diesen Beitrag lesen .

// global.ts

 export const GlobalVariable = Object.freeze({
     BASE_API_URL: 'http://example.com/',
     //... more of your variables
 });

Verweisen Sie das Modul mit Import.

//anotherfile.ts that refers to global constants
import { GlobalVariable } from './path/global';

export class HeroService {
    private baseApiUrl = GlobalVariable.BASE_API_URL;

    //... more code
}

Ein gemeinsamer Dienst ist der beste Ansatz

export class SharedService {
  globalVar:string;
}

Sie müssen jedoch bei der Registrierung sehr vorsichtig sein, um eine einzelne Instanz für Ihre gesamte Anwendung freigeben zu können. Sie müssen es bei der Registrierung Ihrer Bewerbung definieren:

bootstrap(AppComponent, [SharedService]);

aber nicht erneut innerhalb der providersAttribute Ihrer Komponenten zu definieren :

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

Andernfalls wird eine neue Instanz Ihres Dienstes für die Komponente und ihre Unterkomponenten erstellt.

Sie können sich diese Frage ansehen, wie Abhängigkeitsinjektion und hierarchische Injektoren in Angular2 funktionieren:

• Was ist der beste Weg, um einen Dienst in Winkel 2 (Beta) in einen anderen zu injizieren?

Sie können feststellen, dass Sie Observableim Service auch Eigenschaften 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:

• Delegierung: EventEmitter oder Observable in Angular2

Siehe zum Beispiel Angular 2 - Implementierung von Shared Services

@Injectable() 
export class MyGlobals {
  readonly myConfigValue:string = 'abc';
}

@NgModule({
  providers: [MyGlobals],
  ...
})

class MyComponent {
  constructor(private myGlobals:MyGlobals) {
    console.log(myGlobals.myConfigValue);
  }
}

oder individuelle Werte angeben

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

class MyComponent {
  constructor(@Inject('myConfigValue') private myConfigValue:string) {
    console.log(myConfigValue);
  }
}

Erstellen Sie die Globals-Klasse in app / globals.ts :

import { Injectable } from '@angular/core';

Injectable()
export class Globals{
    VAR1 = 'value1';
    VAR2 = 'value2';
}

In Ihrer Komponente:

import { Globals } from './globals';

@Component({
    selector: 'my-app',
    providers: [ Globals ],
    template: `<h1>My Component {{globals.VAR1}}<h1/>`
})
export class AppComponent {
    constructor(private globals: Globals){
    }
}

Hinweis : Sie können den Globals-Dienstanbieter anstelle der Komponente direkt zum Modul hinzufügen, und Sie müssen nicht jeder Komponente in diesem Modul als Anbieter hinzufügen.

@NgModule({
    imports: [...],
    declarations: [...],
    providers: [ Globals ],
    bootstrap: [ AppComponent ]
})
export class AppModule {
}

IMHO für Angular2 (v2.2.3) besteht der beste Weg darin, Dienste hinzuzufügen, die die globale Variable enthalten, und sie in Komponenten ohne das providersTag in der @ComponentAnmerkung einzufügen. Auf diese Weise können Sie Informationen zwischen Komponenten austauschen.

Ein Beispieldienst, der eine globale Variable besitzt:

import { Injectable } from '@angular/core'

@Injectable()
export class SomeSharedService {
  public globalVar = '';
}

Eine Beispielkomponente, die den Wert Ihrer globalen Variablen aktualisiert :

import { SomeSharedService } from '../services/index';

@Component({
  templateUrl: '...'
})
export class UpdatingComponent {

  constructor(private someSharedService: SomeSharedService) { }

  updateValue() {
    this.someSharedService.globalVar = 'updated value';
  }
}

Eine Beispielkomponente, die den Wert Ihrer globalen Variablen liest :

import { SomeSharedService } from '../services/index';

@Component({
  templateUrl: '...'
})
export class ReadingComponent {

  constructor(private someSharedService: SomeSharedService) { }

  readValue() {
    let valueReadOut = this.someSharedService.globalVar;
    // do something with the value read out
  }
}

Beachten Sie, dass dies nicht zu Ihrer Anmerkung hinzugefügt werden providers: [ SomeSharedService ]sollte . Wenn Sie diese Zeileninjektion nicht hinzufügen, erhalten Sie immer die gleiche Instanz von . Wenn Sie die Zeile hinzufügen, wird eine frisch erstellte Instanz eingefügt.@ComponentSomeSharedService

Ich kenne den besten Weg nicht, aber der einfachste Weg, wenn Sie eine globale Variable innerhalb einer Komponente definieren möchten, besteht darin, eine Variable zu verwenden window, um wie folgt zu schreiben:

window.GlobalVariable = "what ever!"

Sie müssen es nicht an Bootstrap übergeben oder an andere Stellen importieren, und es ist global für alle JS zugänglich (nicht nur für Angular 2-Komponenten).

So benutze ich es:

global.ts

export var server: string = 'http://localhost:4200/';
export var var2: number = 2;
export var var3: string = 'var3';

um es zu benutzen, importiere es einfach so:

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import * as glob from '../shared/global'; //<== HERE

@Injectable()
export class AuthService {
    private AuhtorizationServer = glob.server
}

BEARBEITET: "_" wird wie empfohlen vorangestellt.

Ich denke, der beste Weg ist, ein Objekt mit globalen Variablen in Ihrer gesamten Anwendung zu teilen, indem Sie es exportieren und importieren, wo Sie wollen.

Erstellen Sie zunächst eine neue .ts- Datei, z. B. globals.ts, und deklarieren Sie ein Objekt. Ich habe ihm einen Objekttyp gegeben, aber Sie können auch einen beliebigen Typ oder {} verwenden

export let globalVariables: Object = {
 version: '1.3.3.7',
 author: '0x1ad2',
 everything: 42
};

Danach importieren Sie es

import {globalVariables} from "path/to/your/globals.ts"

Und benutze es

console.log(globalVariables);

Ich mag die Antwort von @supercobra, aber ich würde das const-Schlüsselwort verwenden, da es in ES6 bereits verfügbar ist:

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

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