Angular Main Layout子组件路由不能多

Question

愚蠢的问题，但我没有点击它。我的主布局带有导航栏和后来的侧边栏。我还想渲染 3 个组件：产品、购物车、订单。

我在 app.routing.modules.ts 中创建了这样的子路由：

const routes: Routes = [
  {
    path: '',
    component: MainlayoutComponent,
    pathMatch: 'full',
    children: [
      { path: 'product', component: ProductsComponent  },
      { path: 'cart', component: CartComponent },
      { path: 'order', component: OrderComponent },
  ],
  },
  
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

但是我得到一个错误：无法匹配任何路由。 URL 段：'products'

自 angular 以来已经有很长时间了，所以我想我遗漏了什么，但无法点击确切的内容。子组件设置错误？

Git url: https://github.com/TyroniUA/ang

Answer 1

当您将 pathMatch = 'full' 更改为 pathMatch = 'prefix'

时有效

解释：

'full' 当 URL 匹配的剩余未匹配段是前缀路径

时，会导致路由命中

'prefix' 告诉路由器在剩余 URL 以重定向路由的前缀路径开头时匹配重定向路由。

Angular Main Layout子组件路由不能多

Angular Main Layout child component route cannot much

routes

angular-routing

angular