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

【问题标题】：angular 2 call initial function before first routingAngular 2 在第一次路由之前调用初始函数
【发布时间】：2017-05-30 14:37:15
【问题描述】：

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

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

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

有什么办法吗？

【问题讨论】：

标签： angular angular2-routing

【解决方案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})

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

【讨论】：

【解决方案2】：

一个简单的解决方案：

定义路由时，添加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 中从服务器加载您需要的消息，然后重定向到home。

【讨论】：