Question

我有这样的父路线

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

现在儿童路线就像这样

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

现在，当我导航到localhost:4200或localhost:4200/posts时，它会选择第一个子路线并渲染PostsListComponent，其中会列出所有帖子。当我点击单个帖子时，它会将我带到网址localhost:4200/posts/1并呈现PostListComponent，其中列出了一个帖子并详细说明了这一点。

现在的问题是，当我使用此路由localhost:4200/posts/1重新加载页面时，它会将我带到基本网址localhost:4200，并向我提供无法读取未定义的属性comments的错误，由于帖子有很多评论。

问题是因为在重新加载页面时，posts array为null，因此无法从网址中选择包含postId的帖子。所以它给了我上面的错误。

那么如何在重新加载页面时管理它，首先必须加载所有帖子。

以下是我的posts.component.html

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

以下是我的posts-list.component.html

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

Answer 1

对依赖于要加载的数据的路由使用保护，只有在数据可用后才能完成。

有关文档，请参阅https://angular.io/docs/ts/latest/guide/router.html#!#guards。

如何在angular2中处理页面刷新的路由

1 个答案: