angular - APP_INITIALIZER 页面重新加载后未定义的结果

Question

我有一个简单的配置服务，我在我的 app.shared.module.ts 中使用 APP_INITIALIZER token 连接:

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

这会执行订阅 (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;
}

然后我将此服务注入(inject)其他服务(通过它们的构造函数——我不喜欢这样做)，并且在应用程序启动时一切正常:

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

当我转到主页并从那里刷新应用程序时一切正常。调用逻辑并返回数据。但是，当我刷新使用该组件并调用构造函数的特定页面时，数据返回似乎很晚，因此我在此处返回未定义:

this.settings = this.configService.settings;

我猜'wire up'是错误的......

有什么解决的建议吗？

Answer 1

要让 Angular 等待您的自定义 APP_INITIALIZER 完成，它必须返回一个 Promise。你的 getStuff 方法没有返回任何东西，这意味着 Angular 不会等待 this.settings 设置。

您可以使用 toPromise将您的 Observable 转换为 Promise。这是一个基本示例:

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