Angular8路由为空或参数化

Question

在 child 模块（路径 "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
/客户/invoice/any

"Any"总是加载！但我注意到调用“/customer/invoice”时会调用带有参数 "invoice" 的 InvoiceComponent（路由“/customer/invoice/:param”）！看起来第二个模块在传递给它的 children.

时没有从 url 中删除 "invoice"

EDIT EDIT：我发现了错误：第二个模块 也导入了 第三个模块。这导致它的路由被加载为当前而不是 child。第二个答案是正确的设置。

Answer 1

为空路径添加 pathMatch 字段：

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

Answer 2

将路由对象替换为

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

      }]

Angular8路由为空或参数化

Angular8 routing empty or parameterized

angular

angular-router

angular8