Angular 4/5/6 Global Variables

Ich habe wirklich Probleme damit, globale Variablen in meiner Angular 2-Anwendung zu erstellen.

Ich habe in den letzten 3 Stunden bereits viele Beiträge auf StackOverflow gegoogelt und gelesen, aber es scheint, als könnte ich es einfach nicht zum Laufen bringen. Ich hoffe wirklich, dass Sie mir helfen können und ich entschuldige mich dafür, dass Sie diese Frage gestellt haben.

Also habe ich meine Datei mit dem Namen globals.ts , die so aussieht:

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


@Injectable()
export class Globals {

  var role = 'test';

}

Und ich möchte die Variablenrolle in meiner HTML-Ansicht meiner Komponente folgendermaßen verwenden:

{{ role }} 

Ich habe die Datei globals.ts bereits folgendermaßen zu meiner app.module.ts hinzugefügt :

providers: [
  Globals
],

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

Ich hoffe wirklich, dass Sie mir helfen können und entschuldige mich wieder.

Freundliche Grüße,

AE

Sie können Globalsvon jedem Punkt Ihrer App aus über die Angular Dependency Injection auf Entity zugreifen . Wenn Sie einen Globals.roleWert in der Vorlage einer Komponente ausgeben möchten , sollten Sie Globalswie bei jedem Dienst über den Konstruktor der Komponente 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(public globals: Globals) {}
}

Ich habe Globalsin der bereitgestellt HelloComponent, aber stattdessen könnte es in einer HelloComponent'sübergeordneten Komponente oder sogar in bereitgestellt werden AppModule. Es spielt keine Rolle, bis Sie Globalsnur statische Daten haben, die nicht geändert werden konnten (z. B. nur Konstanten). Wenn dies jedoch nicht der Fall ist und beispielsweise verschiedene Komponenten / Dienste diese Daten ändern möchten, Globalsmuss dies ein Singleton sein . In diesem Fall sollte es auf der obersten Ebene der Hierarchie bereitgestellt werden, auf der es verwendet werden soll. Angenommen, dies ist 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
  ]
})

Es ist auch unmöglich, var so zu verwenden, wie Sie es getan haben

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

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

Aktualisieren

Zuletzt habe ich eine einfache Demo auf stackblitz erstellt , bei der Single Globalsvon drei Komponenten gemeinsam genutzt wird und eine davon den Wert von ändern kann Globals.role.

Ich benutze die Umgebung dafür. Es funktioniert automatisch und Sie müssen keinen neuen injizierbaren Dienst erstellen und für mich am nützlichsten, müssen Sie nicht über den Konstruktor importieren.

1) Erstellen Sie eine Umgebungsvariable in Ihrer Umgebung

export const environment = {
    ...
    // runtime variables
    isContentLoading: false,
    isDeployNeeded: false
}

2) Importieren Sie environment.ts in die * .ts-Datei und erstellen Sie eine öffentliche Variable (dh "env"), um sie in einer HTML-Vorlage verwenden zu können

import { environment } from 'environments/environment';

@Component(...)
export class TestComponent {
    ...
    env = environment;
}

3) Verwenden Sie es in Vorlage ...

<app-spinner *ngIf='env.isContentLoading'></app-spinner>

in * .ts ...

env.isContentLoading = false 

(oder einfach environment.isContentLoading, falls Sie es nicht für die Vorlage benötigen)

Sie können Ihre eigenen globalen Elemente in environment.ts wie folgt erstellen:

export const globals = {
    isContentLoading: false,
    isDeployNeeded: false
}

und importiere diese Variablen direkt (y)

Nicht wirklich empfohlen, aber keine der anderen Antworten sind wirklich globale Variablen. Für eine wirklich globale Variable könnten Sie dies tun.

Index.html

<body>
  <app-root></app-root>
  <script>
    myTest = 1;
  </script>
</body>

Komponente oder irgendetwas anderes in Angular

..in der Nähe rechts oben nach dem Import:

declare const myTest: any;

...später:

console.warn(myTest); // outputs '1'

Sie können das Window-Objekt verwenden und überall darauf zugreifen. Beispiel window.defaultTitle = "mein Titel"; Dann können Sie auf window.defaultTitle zugreifen, ohne etwas zu importieren.