Angular 4/5 Globale Variablen

Question

Ich habe wirklich Schwierigkeiten mit der Erstellung globaler Variablen in meiner Angular 2-Anwendung.

Ich habe bereits googelt und viele Posts auf StackOverflow in den letzten 3 Stunden gelesen, aber es scheint, als ob ich es einfach nicht funktionieren lassen kann. Ich hoffe wirklich, dass Sie mir helfen können und ich entschuldige mich dafür, diese Frage gestellt zu haben.

So habe ich meine Datei namens globals.ts, die wie folgt aussieht:

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


@Injectable() 
export class Globals { 

    var role = 'test'; 

} 

Und ich möchte in meinem HTML-Ansicht meiner Komponente wie dies die Variable Rolle verwenden:

{{ role }} 

ich habe bereits die globals.ts Datei auf meinem app.module.ts auf folgende Weise:

providers: [ 
    Globals 
], 

Egal was ich in dieser Datei gemacht habe, es hat einfach nicht funktioniert. Was ich nicht tun möchte, ist die Datei globals.ts manuell in jede Komponente importieren zu müssen, weshalb ich die Provider-Funktion verwenden möchte.

Ich hoffe wirklich, Sie können mir helfen und es tut mir leid wieder.

Mit freundlichen Grüßen,

A E

Answer 1

Sie Globals Einheit von jedem Punkt Ihrer App über Angular dependency injection zugreifen können. Wenn Sie die Ausgabe Globals.role Wert in einiger Vorlage der Komponente wollen, sollten Sie Globals durch die Komponente Konstruktor wie jeder Dienst injizieren:

// hello.component.ts 
import { Component } from '@angular/core'; 
import { Globals } from './globals'; 

@Component({ 
    selector: 'hello', 
    template: 'The global role is {{globals.role}}', 
    providers: [ Globals ] // this depends on situation, see below 
}) 

export class HelloComponent { 
    constructor(private globals: Globals) {} 
} 

I Globals im HelloComponent vorgesehen, sondern stattdessen könnte es in einigen HelloComponent's Elternkomponenten zur Verfügung gestellt werden oder sogar in AppModule. Es spielt keine Rolle, bis Ihre Globals nur statische Daten hat, die nicht geändert werden konnten (nur Konstanten). Wenn dies jedoch nicht der Fall ist und beispielsweise verschiedene Komponenten/Dienste diese Daten ändern können, muss Globals eine singleton sein. In diesem Fall sollte es in der obersten Ebene der Hierarchie bereitgestellt werden, in der es verwendet werden soll. Lassen Sie uns sagen, dass dies AppModule:

import { Globals } from './globals' 

@NgModule({ 
    // ... imports, declarations etc 
    providers: [ 
    // ... other global providers 
    Globals // so do not provide it into another components/services if you want it to be a singleton 
    ] 
}) 

Auch ist es unmöglich var so, wie Sie tat zu verwenden, sollte es

// globals.ts 
import { Injectable } from '@angular/core'; 

@Injectable() 
export class Globals { 
    role: string = 'test'; 
} 

aktualisieren

Endlich sein, habe ich eine einfach demo on Plunker, wobei einzelne Globals wird von 3 Komponenten geteilt und einer von ihnen kann den Wert von Globals.role ändern.