在 APP_INITIALIZER promise 解决之前构建 Angular (v5) 服务

Question

我希望 Angular 等到我的 loadConfig() 函数解析后再构建其他服务，但事实并非如此。

app.module.ts

export function initializeConfig(config: AppConfig){
    return () => config.loadConfig();
}

@NgModule({
     declarations: [...]
     providers: [
          AppConfig,
         { provide: APP_INITIALIZER, useFactory: initializeConfig, deps: [AppConfig], multi: true }
     ] })
export class AppModule {

app.config.ts

@Injectable()
export class AppConfig {

    config: any;

    constructor(
        private injector: Injector
    ){
    }

    public loadConfig() {
        const http = this.injector.get(HttpClient);

        return new Promise((resolve, reject) => {
            http.get('http://mycoolapp.com/env')
                .map((res) => res )
                .catch((err) => {
                    console.log("ERROR getting config data", err );
                    resolve(true);
                    return Observable.throw(err || 'Server error while getting environment');
                })
                .subscribe( (configData) => {
                    console.log("configData: ", configData);
                    this.config = configData;
                    resolve(true);
                });
        });
    }
}

some-other-service.ts

@Injectable()
export class SomeOtherService {

    constructor(
        private appConfig: AppConfig
    ) {
         console.log("This is getting called before appConfig's loadConfig method is resolved!");
    }
 }

SomeOtherService 的构造函数在从服务器接收数据之前被调用。这是一个问题，因为 SomeOtherService 中的字段没有设置为正确的值。

如何确保 SomeOtherService 的构造函数仅在 loadConfig 的请求得到解决后才被调用？

Answer 1

我也有一个类似的问题，为我解决问题的方法是使用 Observable 方法和运算符来做所有事情。然后最后只需使用 Observable 的 toPromise 方法返回一个 Promise。这也更简单，因为您不需要自己创建 promise 。

AppConfig 服务看起来像这样:

import { Injectable, Injector } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { tap } from 'rxjs/operators/tap';

@Injectable()
export class AppConfig {

    config: any = null;

    constructor(
        private injector: Injector
    ){
    }

    public loadConfig() {
        const http = this.injector.get(HttpClient);

        return http.get('https://jsonplaceholder.typicode.com/posts/1').pipe(
          tap((returnedConfig) => this.config = returnedConfig)
        ).toPromise();
        //return from([1]).toPromise();
    }
}

我正在使用新的 pipeable operators在谷歌为 Angular 5 推荐的 rxjs 中。 tap 运算符等同于旧的 do 运算符。

我还在 stackblitz.com 上创建了一个工作示例，因此您可以确保它正常工作。 Sample link