有没有办法在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,
}