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

Question

My child module routes are as follows,

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

I am navigating to these routes as follows,

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

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

But Angular detects new route as :id and navigates me to TripDetailComponent .

The problem here is Angular detects 'new' string as url parameter for :id route.

I could add a prefix to :id , ie view/:id and make this work. But, I need to keep the url pattern as it is. Is there a way to do this?

My expected url pattern is,

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

Answer 1

Currently you :id route matches also with new and the router doesn't look further for other matching routes.

The order is relevant. Move the new route before the :id route, then the new route matches before the :id route.

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

Answer 2

You cannot map two path with the same exact segments as parameter ( :id matches the new path).

However, you can map manually the correct action with the following configuration.

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

Into the component TripDetailComponent , you can trigger the creation process if the parameter is equal to new.

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
        () => {}
    );

This answer is related to this one.