Eckige 2-Wert-Anbieter - Werte von API-Aufruf bei der Initialisierung

Question

Ich muss ein Datum für unsere Anwendung bereitstellen. Wir verwenden dies, um das Format für die gesamte Anzeige und Eingabe von Daten festzulegen.

Ich muss dies an zahlreichen Stellen der Anwendung zur Verfügung stellen. Das Datum variiert jedoch je nach Client. Wir haben einen API-Aufruf, der eine Vielzahl von Einstellungen (eine davon ist die Datumskonfiguration) als JSON-Objekt bereitstellt.

Ich möchte in der Lage sein, ein Objekt, das die Konfigurationsoptionen darstellt, als einen Wert über DI bereitzustellen. Es gibt viele Beispiele für die Bereitstellung von Werten, aber sie sind alle statisch und nicht dynamisch.

mag ich so etwas in meiner DI Zusammensetzung Wurzel

provide('DateFormat', { 
    useValue: 'dd/MM/yyyy' 
}) 

jedoch tun, ich will 'dd/MM/yyyy' von Einstellungen beim Start zu kommen.

Ich habe versucht, es über Dienste bereitzustellen, aber es verursacht Probleme mit Race-Bedingungen an einigen Stellen (Wert nicht verfügbar, wenn ein Dienst ausgeführt wird). Einiges davon könnte gelöst werden, indem es mit mehr Observablen neu geschrieben wird, aber es macht den Code nur komplexer. Also möchte ich eine Möglichkeit, das Objekt über DI zur Verfügung zu stellen und die Werte einstellen lassen, bevor ich etwas anderes mache.

Irgendwelche Ideen wie man das erreicht?

Answer 1

Wenn Sie den Dienst im Bootstrap oder in den Providern [] in der Root-Komponente Ihrer App bereitstellen, wird der Dienst instanziiert. Im Service Constructor können Sie die Daten über die API abrufen.

Wenn Sie warten müssen, bis es lädt, bevor die erste Seite angezeigt wird, könnten Sie eine Observable haben, die anzeigt, dass die Daten geladen sind oder nicht. Verwenden Sie diese Observable, um zu einer neuen Komponente zu routen, indem Sie die Observable abonnieren. Oder verwenden Sie abhängig von der Struktur Ihrer App * ngIf für die boolesche beobachtbare Menge, die vom Dienst festgelegt wurde, um einen Initialisierungsbildschirm anzuzeigen, bis der API-Aufruf zurückgegeben wird und die Daten initialisiert werden.

Jede andere Komponente, die diese Konfiguration benötigt, kann diese Instanz des Dienstes verwenden, indem sie über die Konstruktorargumente injiziert.

import {ConfigurationService} from 'path/to/configuration-service'; 

@Component({ 
    selector : '', 
    providers: [ConfigurationService] <<-- This instantiates a new 
    uninitialized service. Do this only in the root component. 


}) 

export ComponentNeedingDateFormat() { 
    constructor(private configurationService: ConfigurationService) { } 
} 

Wenn Sie es in Komponentenanbieter einschließen: [] wird es einen neuen Dienst instanziieren. Sie möchten es nur in der Root-Komponente injizieren.

https://angular.io/docs/ts/latest/guide/dependency-injection.html