Angular8 маршрутизация пуста или параметризована

Question

В дочернем модуле (путь "invoice") я пытаюсь зарегистрировать следующие маршруты:

const routes = [
{
    path: '',
    component: SearchComponent
},
{
    path: ':quotationNumber',
    component: InvoiceComponent
}
];

Идея состоит в том, что "/ invoice" показывает SearchComponent, в то время как "/ invoice / any"показывает InvoiceComponent, передавая «any» в качестве параметра «quotationNumber». Но как только добавляется второй маршрут, он всегда выбирается! «/ invoice» также загружает InvoiceComponent с пустым параметром.

Установка

{
   path: '',
   component: SearchComponent,
   pathMatch:'full'
}

не изменяет поведение.

Редактировать: На самом делесценарий немного отличается - может быть, это вызывает проблемы?

AppModule загружает CustomerModule:

{
    path: 'customer',
    loadChildren: () => import('./customer/customer.module').then(mod => mod.CustomerModule)
},

CustomerModule загружает InvoiceModule:

{
    path: 'invoice',
    loadChildren: () => import('./invoice/invoice.module').then(mod => mod.InvoiceModule)
},

, а InvoiceModule загружаетМодуль с компонентами, как описано.

Полный путь на самом деле составляет

• / клиент / счет
• / клиент / счет / любой

«Любой» всегда загружайся! Но я заметил, что вызов "/ customer / invoice" вызывает InvoiceComponent (маршрут "/ customer / invoice /: param") с параметром "invoice"! Похоже, что 2-й модуль не удаляет "счет-фактуру" из URL при передаче его дочерним элементам.

РЕДАКТИРОВАТЬ, РЕДАКТИРОВАТЬ : Я обнаружил ошибку: 2-й модуль импортирован третий тоже. Это привело к тому, что его маршруты загружались как текущие, а не как дочерние. 2-й ответ для правильной настройки.

Answer 1

Добавить pathMatch поле для пустого пути:

{
  path: '',
  component: SearchComponent,
  pathMatch: 'full',
},

Answer 2

замените объект маршрутов на

  const routes: Routes = [{
        path: "invoice/:quotationNumber",
        children: [
          {
            path: "**",
            component: InvoiceComponent
          }
        ]},
       {
        path: "/invoice",
        component: SearchComponent

      }]