Load Route nach Daten in Angular 4

Question

In meiner Anwendung habe ich einige Daten, die in der gesamten Anwendung üblich ist. Die Daten werden jedoch nach dem Laden der Ansicht aufgefüllt. Zum Beispiel Daten wie Benutzereinstellungen, Profil usw. Ich weiß, wir können Auflösung für das Laden von Daten verwenden, bevor die Ansicht geladen wird, aber ich kann keine Auflösung zu allen Routen hinzufügen. Wenn also eine bestimmte Route aktualisiert wird, sind die Daten nicht verfügbar oder die Antwort vom Server kommt erst, nachdem die Ansicht geladen wurde.

Wie kann das gemacht werden?

Unten ist der Beispielcode von dem, was ich versuche zu erreichen. in App.Component.ts Wenn das Token existiert dann Redirect auf die angeforderte Seite else Umleitung zu Login.

Die Ladedatenmethode trifft einige APIs und lädt Daten in Modelle.

zum Beispiel:

public loadAppData() { 

     this.getUserSettings().then(settings => { 
      if (settings) { 
       //Do Something 
      } 
     }, error => { 

      }); 



     this.setUserProfile().then(settings => { 
      //Do something 

     }); 

    } 

Die Daten aus setUserProfile kommt, nachdem die Ansicht geladen ist. Wie kann das gemacht werden?

Danke!

Answer 1

Definieren Sie eine "Shell" -Komponente, die vor einer der anderen Komponenten geladen wird, und fügen Sie den Resolver hinzu.

App Vorlage

<router-outlet></router-outlet> 

Shell Component Template

<pm-menu></pm-menu> 

<div class='container'> 
    <router-outlet></router-outlet> 
</div> 

App Routing Module

@NgModule({ 
    imports: [ 
     RouterModule.forRoot([ 
      { 
       path: '', 
       component: ShellComponent, 
       resolve: { data: DataResolver }. // <--- HERE 
       children: [ 
        { path: 'welcome', component: WelcomeComponent }, 
        { 
         path: 'products', 
         canActivate: [AuthGuard], 
         loadChildren: './products/product.module#ProductModule' 
        }, 
        { path: '', redirectTo: 'welcome', pathMatch: 'full' }, 
       ] 
      }, 
      { path: '**', component: PageNotFoundComponent } 
     ]) 
    ], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule { }