Wie Routen auf Aktualisierung der Seite zu handhaben in angular2

Question

Ich habe Eltern Routen wie diese

export const routes: Routes = [ 
    { path: '', redirectTo: 'posts', pathMatch: 'full' }, 
    { path: 'posts', component: PostsComponent, children: PostRoutes } 
]; 

Jetzt sind die Kinder Routen wie diese

export const PostRoutes = [ 
    { path: '', component: PostsListComponent }, 
    { path: ':id', component: PostDetailComponent } 
] 

Nun, wenn ich zu localhost:4200 oder localhost:4200/posts navigieren es die wählen erste untergeordnete Route und render PostsListComponent, die alle Beiträge auflistet. wenn ich auf einen einzelnen Post klicke, dann bringt es mich zu der URL localhost:4200/posts/1 und render PostListComponent welche einen einzigen Beitrag und Details auflisten.

Nun das Problem ist, wenn ich die Seite mit dieser dieser Route neu laden localhost:4200/posts/1, es nimmt mich an die Basis URL localhost:4200 und gibt mir Fehler, die nicht Eigentum comments undefinierte lesen können, da Beiträge viele Kommentare.

Das Problem liegt darin, dass beim erneuten Laden der Seite posts arraynull ist, so dass es nicht möglich ist, einen Post mit der postId aus der URL auszuwählen. also gibt es mir einen Fehler.

Wie man das beim erneuten Laden der Seite verwalten kann, müssen zuerst alle Beiträge geladen werden.

Unten ist mein posts.component.html

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

Unten ist mein posts-list.component.html

<div [routerLink]="['/posts', post.id]" *ngFor="let post of posts$ | async"> 
    <h3>{{post.description}}</h3> 
</div> 

Answer 1

Verwenden Sie eine Wache für die Routen, die auf den Daten abhängen, geladen werden, dass nur vollendet, nachdem die Daten zur Verfügung steht.

Informationen zur Dokumentation siehe https://angular.io/docs/ts/latest/guide/router.html#!#guards.