Angular2 Router 3.0 beta 1(通过 Routerlink 的子路由失败)

Question

我从 Angular.io 中获取了一个路由示例作为新路由器示例。

Original Angular2 Routing Example

我尝试理解，然后对子路由做了一些更改。

1) 在此示例中，他们通过 this.router.navigate(['/crisis-center', Crisis.id]); 方法从 Crisis-List-items 导航到 Crisis Detail .

我想在每个列表项上使用路由器链接而不是 Click 事件(如下所示)，[在 crisis.list.component 中进行的更改]

[routerLink]="./crisis-center/" + crisis.id 

我还 fork 了 plunker 并进行了更改。但现在危机中心列表尚未加载。 Changed Plunker here

任何人都可以提出问题所在吗？子路由在新路由器中不起作用还是这里的 routerlink 使用错误？

Answer 1

CrisisListComponent 是 CrisisAdminComponent 的子路由，与 CrisisDetailComponent

相同

export const crisisCenterRoutes: RouterConfig = [
  {
    path: 'crisis-center',
    component: CrisisCenterComponent,
    children: [
      {
        path: 'admin',
        component: CrisisAdminComponent,
        canActivate: [AuthGuard]
      },
      {
        path: ':id',
        component: CrisisDetailComponent,
        canDeactivate: [CanDeactivateGuard]
      },
      {
        path: '',
        component: CrisisListComponent
      }
    ]
  }
];

如果您想导航到同级路由，您需要相对于父级或根级调用它。

其中一个到达路线

[routerLink]=["../crisis-center",   crisis.id]
[routerLink]=["/crisis-center",     crisis.id]
[routerLink]=["../crisis-center/" + crisis.id]
[routerLink]=["/crisis-center/"   + crisis.id]