Question

我有一个简单的配置服务，已在app.shared.module.ts中与APP_INITIALIZER令牌连接：

 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;
}

然后我将此服务注入其他服务（通过它们的构造函数-我不喜欢），并且在应用程序启动时一切正常：

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

当我转到主页并从那里刷新应用程序时很好。调用逻辑并返回数据。但是，当我刷新一个使用该组件的特定页面并调用构造函数时，似乎数据返回得太晚了，因此在这里返回未定义的信息：

this.settings = this.configService.settings;

我想“连线”是错误的...

任何建议如何解决？

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;
        });
}

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

1 个答案: