eckig 2 Anruf anfängliche Funktion vor dem ersten Routing

Question

Ich habe eine App, wo ich alle Nachrichten vom Server laden möchte, bevor die App tatsächlich geladen wird.

Ich habe die http-Anfrage in meiner App-Komponente in OnInit gestellt.

aber ich habe keine Möglichkeit, das Routing "warten" vor dem Abrufen der ersten Seite und die Anwendung beginnt mit leeren Nachrichten.

Jeder Weg, dies zu tun?

Answer 1

Sie können die APP_INITIALIZER für diesen Einsatz:

Fügen Sie diese an den Anbieter Array Ihrer AppModule:

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

dann eine Funktion ab Werk schaffen, die Ihre Nachrichten erhält. Dies sollte einen Pfeil Funktion zurückgeben die tatsächliche Promise Rückkehr:

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

Wenn Sie nicht, dass die AppComponent Lasten nichts dagegen tun, aber tun Geist über seine Unterseiten geladen, können Sie die initialNavigation Eigenschaft auf Ihrem Root-Routing verwenden können:

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

Dies verhindert das Laden des ersten Moduls. Sie sollten jedoch einige Service in Ihre AppComponent, die das Laden Ihrer Nachrichten verarbeitet gespritzt haben, und leitet dann in die gewünschte Modul

Answer 2

Eine einfache Lösung:

Wenn Sie Ihre Routen zu definieren, fügen Sie eine prehome Seite und 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 
    ]  

in Ihrem PreHomeComponent Ihre erforderlichen Nachrichten vom Server laden und dann auf home umleiten.