有沒有辦法在angular中添加多條動態路由？

Question

有沒有辦法在angular中添加多條動態路由？

像這樣：

  {
    path: ':product',
    loadChildren: () =>
      import('./pages/product/product.module').then((m) => m.ProductModule),
  },
  {
    path: ':category',
    loadChildren: () =>
      import('./pages/category/category.module').then((m) => m.CategoryModule),
  },

原因如果我執行上述操作，其中一個會替換另一個。

Answer 1

要告訴 Angular 路徑是產品還是類別，你必須這樣寫。

  {
    path: 'product/:product',
    loadChildren: () =>
      import('./pages/product/product.module').then((m) => m.ProductModule),
  },
  {
    path: 'category/:category',
    loadChildren: () =>
      import('./pages/category/category.module').then((m) => m.CategoryModule),
  },

要訪問產品， https://(yourserver)/product/(product id) 。 要訪問類別， https://(yourserver)/category/(category id) 。

Answer 2

由於:product和category只是占位符，Angular 不知道它們之間的區別，而是考慮以下內容。

我會為產品創建一個路徑綁定（到 static 路徑），然后讓模塊本身進行各種綁定等：

在“根”路由配置中：

{
  path 'products',
  loadChildren: () => 
    import('./pages/product/product.module').then((m) => m.ProductModule),
}

...並在ProductModule的路由中：

{
  path: '',
  component: ProductListings,
},
{
  path: ':productId',
  component: ProductDetails,
}