angular - APP_INITIALIZER odefinierad resultat efter sidomladdning

Jag har en enkel konfigurationstjänst som jag har kopplat med APP_INITIALIZER-token i min app.shared.module.ts:

 ConfigService,
        {
            provide: APP_INITIALIZER,
            useFactory: (configService: ConfigService) =>
                () => configService.getStuff(),
            deps: [ConfigService],
            multi: true
        },

Detta utför prenumerationen (config.service.ts):

settings: any; 

getStuff() {
    this.getSettings()
        .subscribe(data => {
            this.settings = data);
        });
}

getSettings(): Observable<ISettings> {
    return (this.httpClient
        .get<ISettings>(this.localbaseUrl)
        .pipe(
            catchError(this.errorHandlerSerevice.handleError)
        )) as any;
}

Sedan injicerar jag den här tjänsten i andra tjänster (genom deras konstruktörer - vilket jag inte gillar) och allt fungerar bra när appen startar:

constructor(){
     this.settings = this.configService.settings;
}

Det är okej när jag går till startsidan och uppdaterar appen därifrån. Logiken anropas och data returneras. Men när jag uppdaterar en specifik sida som använder komponenten och anropar konstruktorn verkar det vara för sent för att datan ska komma tillbaka, därför får jag undefined returnerat här:

this.settings = this.configService.settings;

Jag antar att 'wire up' är fel...

Några förslag på hur man ska ta itu med det?

Svar #1

För att Angular ska vänta på att din anpassade APP_INITIALIZER ska slutföras, måste den returnera ett Promise. Din getStuff-metod returnerar inget, vilket innebär att Angular inte kommer att vänta på att this.settings ska sättas.

Du kan använda toPromise för att konvertera din Observable till ett Promise. Här är ett grundläggande exempel:

getStuff(): Promise<void> {
    return this.getSettings()
        .toPromise()
        .then(data => {
            this.settings = data;
        });
}