Question

我从Angular.io获取了一个路由样本，用于新的路由器示例。

我试图理解，然后对子路由进行了一些更改。

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

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

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

我也分叉了那个弹药并进行了修改。但现在危机中心列表没有加载。 Changed Plunker here

任何人都可以提出错误吗？子路由在新路由器中是不起作用的，或者路由器连接使用在这里是错误的吗？

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]

Angular2 Router 3.0 beta 1（通过Routerlink的子路由失败）

1 个答案: