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 },
  ]
}

Answer 2

您无法使用与参数完全相同的段映射两个路径（：id 与新路径匹配）。

但是，您可以使用以下配置手动映射正确的操作。

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

如果参数等于new，则可以在组件TripDetailComponent中触发创建过程。

this.route.params.subscribe(
        params => {  
                let id = params['id'];
                if (id === "new") {
                    // Create a new element
                } else if(p.match(/\d+/)){
                    // Display the details
                } else {
                    // Handle when id is not a number
                }
        },
        // Handle error
        err => this.logger.error(err),
        //Complete
        () => {}
    );

此answer与此相关。

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

2 个答案: