使用Observables初始化Angular应用程序

Question

我有一个应用程序，在启动之前需要进行一些初始化。我使用的是推荐的方式，包括APP_INITIALIZER、工厂函数等，以及工厂函数中允许使用可观察性而非承诺的语法。

init.service.ts

...
constructor(private http: HttpClient){}
...
public init(){
return this.http.get(url).subscribe((data) => {
// save data in local variables
});
}
...

应用程序模块.ts

... 
export function initializeApp(initService: InitService) {
return () => initService.init(); // this should convert the Obs into a Promise before return
}
...
providers: [
{
provider: APP_INITIALIZER,
useFactory: initializeApp,
deps: [InitService],
multi; true
}
]
...

现在，这不起作用，这意味着应用程序在初始化完成之前启动(组件渲染和所有)。

据我所知，问题在于函数init()应该返回一个Observable对象。尽管如此，我还是希望.subscribe()部分在服务函数中定义。有没有任何方法可以订阅Observable并在同一行中返回Observable对象？(像我一样简单地准备了一个return，但没有起作用)

我想这是唯一缺少的东西，因为提供商将确保在启动应用程序之前解决Promise？

感谢您的帮助，

--Thomas

Answer 1

APP_INITIALIZER需要一个Observable，因此您的InitService需要简单地映射响应数据，而不是订阅。

return this.http.get(url).pipe(map(data) => {
// save data in local variables
}));

这里有一个工作示例——本示例中的APP_INITIALIZER将把一个关于猫的随机事实预加载到本地存储中。AppComponent可以在init上从本地存储中读取事实并显示它，而无需等待。

Answer 2

显然，我的问题的一个微不足道的解决方案是

public init(): Observable<any>{
let obs this.http.get(url);
obs.subscribe((data) => {
// save data in local variables
});
return obs;
}

可能不完全符合Observables的最佳实践，但到目前为止似乎正在发挥作用。