Угловой 5: два маршрута (параметризованные и не параметризованные) переходят к одному и тому же компоненту

Question

У меня есть несколько таких маршрутов:

  { path: 'bill', component: BillListComponent },
  { path: 'bill/:id', component: BillDetailComponent },
  { path: 'bill/save', component: BillSaveComponent },
  { path: 'bill/save/:id', component: BillSaveComponent },

и в моем компоненте есть кнопки ответа на события нажатия в методах, подобных следующему, но они перемещаются в то же место:

  redirectToBillDetail(item: Bill) {
      this.router.navigate(['bill', item.id]);
  }
  redirectToBillNew() {
      this.router.navigate(['bill/save']);
  }

Они оба переходят к BillDetailComponent (ссылки в адресной строке браузера - правильный счет / сохранить против счета / ID_1234). Может ли кто-нибудь показать мне, что я не прав?

Answer 1

Проблема в том, что Angular не знает, является ли save значением для параметра :id. Фактически, как только он находит соответствующий маршрут, он выбирает этот маршрут.

Чтобы обойти это, вы должны сначала указать более конкретный маршрут, так:

{ path: 'bill', component: BillListComponent },
{ path: 'bill/save', component: BillSaveComponent },
{ path: 'bill/:id', component: BillDetailComponent },
{ path: 'bill/save/:id', component: BillSaveComponent },

Таким образом, он будет пробовать маршрут :id только после попытки совпадения с маршрутом save

Answer 2

Необходимо проверить параметр в ngOnInit в вызывающем компоненте, а затем вызвать требуемую функцию, которую маршрутизатор не может определить между сохранением и сохранением: id

ngOnInit(){

if (this.route.snapshot.params['id']) {
        redirectToBillDetail(this.route.snapshot.params['id']);
    }
    else
     {
        redirectToNewBill();
      }
    }