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

Question

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

我已将http请求放入OnInit中的app组件中。

但是我没有办法做出路由＆＃34;等待＆＃34;在获取第一页之前，应用程序以空消息开始。

有什么办法吗？

Answer 1

您可以使用APP_INITIALIZER：

将此添加到AppModule的提供者数组：

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

这可以防止加载第一个模块。但是，您应该在AppComponent中注入一些服务来处理邮件的加载，然后路由到所需的模块

Answer 2

一个简单的解决方案：

定义路线时，请添加/usr/share/roundcube页面和prehome：

PreHomeComponent

在 imports: [ RouterModule.forRoot([ { path: '', redirectTo: 'prehome', pathMatch: 'full' }, { path: 'prehome', component: PreHomeComponent }, { path: 'home', component: HomeComponent }, { path: 'counter', component: CounterComponent }, { path: 'fetch-data', component: FetchDataComponent }, { path: "job/:id", component: JobComponent }, { path: '**', redirectTo: 'prehome' } ]), MaterialModule ] 从服务器加载所需邮件，然后重定向到PreHomeComponent。