2017-12-29 1 views
0

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.Load Route nach Daten in Angular 4

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!

Antwort

0

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 { } 
+0

ich sich geschaffen habe ll component.aber ich bin nicht in der Lage zu uncertand, wie die Änderungen an routing.My App hatte verschiedene Module und jedes Modul hat seine eigene Routing-Datei als auch.So in der App Routing habe ich die folgenden Routen const appRoutes: Routes = [ {Pfad: '', redirectTo: '/ login', pathMatch: 'full'}, {Pfad: '**', Komponente: PageNotFoundComponent}, ]; –

+0

Im obigen Beispiel sehen Sie, wie die Produkte mit 'loadChildren' geladen werden. Sie können das vollständige Beispiel hier sehen: https://github.com/DeborahK/Angular-Communication – DeborahK

Verwandte Themen