带有url参数的Angular 2路由与其他路由冲突

Question

我的子模块路由如下,

{
  path: '',
  children: [
    { path: '', component: TripManagerComponent },
    { path: ':id', component: TripDetailComponent },
    { path: 'new', component: TripNewComponent }
  ]
}

我按照以下方式导航到这些路线,

navigateToTrip(index: number) {
  this.router.navigate([index], { relativeTo: this.route });
}

navigateToNewTrip() {
  this.router.navigate(['new'], { relativeTo: this.route });
}

但是Angular会检测new路线:id并导航我TripDetailComponent.

这里的问题是Angular将'new'字符串检测为:id路由的url参数.

我可以添加一个前缀:id,即使view/:id这个工作.但是,我需要保持url模式不变.有没有办法做到这一点？

我期望的网址模式是,

/trips        --> show all trips
/trips/2334   --> show details of trip 2334
/trips/new    --> show a form to create a new trip

Answer 1

目前您:id也路由匹配,new并且路由器不会进一步寻找其他匹配路由.

订单是相关的.在new路线前移动:id路线,然后new路线在路线前匹配:id.

{
  path: '',
  children: [
    { path: '', component: TripManagerComponent },
    { path: 'new', component: TripNewComponent }
    { path: ':id', component: TripDetailComponent },
  ]
}