Angular 2在第一次路由之前调用初始函数

Question

我有一个应用程序，我想在实际加载应用程序之前加载来自服务器的所有消息。

我已将 http 请求放入 OnInit 中的应用程序组件中。

但我没有办法让路由在获取第一页之前“等待”，并且应用程序以空消息启动。

有办法做到这一点吗？

Answer 1

您可以使用APP_INITIALIZER来实现:

将其添加到您的AppModule的providers数组中:

{provide: APP_INITIALIZER, useFactory: appInitFactory, deps: [MsgLoader], multi: true}

然后创建一个函数工厂来获取您的消息。这应该返回一个箭头函数，返回实际的 Promise:

export function appInitFactory(msg: MsgLoader): () => Promise<any> {
    return () => msg.loadMessages();
}

如果您不介意 AppComponent 加载，但介意加载其子页面，则可以在根路由上使用 initialNavigation 属性:

RouterModule.forRoot(AppRoutes, {initialNavigation: false})

这会阻止加载第一个模块。但是，您应该将一些服务注入(inject)到您的 AppComponent 中，该服务处理消息的加载，然后路由到所需的模块