2016-11-08 8 views
6

Моего ребенок модуль маршрутами являются следующими,Угловой 2 маршрут с конфликтами параметров URL с другими маршрутами

{ 
    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 

ответ

6

В настоящее время вы сравниваете :id, а также new, и маршрутизатор не ищет другие подходящие маршруты.

Порядок актуализации. Переместите маршрут new до маршрута :id, затем маршрут new соответствует маршруту :id.

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

Спасибо Гюнтер. Оно работает. Никогда не думал, что порядок будет иметь значение. –

+1

Маршрут всегда меня достает: | спасибо за разъяснение этого. – moeabdol

1

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

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

{ 
    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 связан с этим.

+0

Спасибо Николасу. Это немного сложное решение, чем решение Гюнтера. Но я считаю, что я могу столкнуться с ситуациями, когда мне нужно использовать этот метод для загрузки компонентов, когда приложение растет. –

Смежные вопросы