Угловой 2 маршрут с конфликтами параметров URL с другими маршрутами

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 }); 
} 

Но Угловое обнаруживает new маршрута как :id и переводит меня на TripDetailComponent.

Проблема здесь: «Угловая» обнаруживает «новую» строку как параметр url для маршрута :id.

Я могу добавить префикс к :id, то есть view/:id и выполнить эту работу. Но мне нужно сохранить шаблон url как есть. Есть ли способ сделать это?

Мой ожидается шаблон 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

Вы не можете отобразить два пути с теми же точными, как сегменты параметра (: идентификатор соответствует пути новый).

Однако вы можете вручную сопоставить правильное действие со следующей конфигурацией.

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

В компоненте 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 связан с этим.