如何区分产品页面和类别页面？答案

【问题标题】：How can i differentiate a productpage from a category page?如何区分产品页面和类别页面？
【发布时间】：2018-01-31 08:58:00
【问题描述】：

所以我正在做一个小项目来建立一个网上商店。但我真的很难解决这部分路由问题。

这是我的路由代码：

 { path: 'productrange', component: ProductRangeComponent },
 { path: 'productrange/:productgroup', component: ProductRangeComponent },
 { path: 'productrange/:productgroup/:producttype', component: ProductRangeComponent },
 { path: 'products/:productgroup/:producttype', component: ProductsComponent },
 { path: 'products/:productgroup/:producttype/:productsubtype', component: ProductsComponent },

所以这行得通，但我认为这不是最好的方法。因为我使用了两个不同的组件和两个不同的路径。

这就是我想要的：

 { path: 'products', component: ProductsComponent },
 { path: 'products/:productgroup', component: ProductsComponent },
 { path: 'products/:productgroup/:producttype', component: ProductsComponent },
 { path: 'products/:productgroup/:producttype/:productsubtype', component: ProductsComponent },

只要产品仅在最后一个路径中开始显示，这将起作用，但情况并非总是如此。有时在第 3 条路径甚至第 2 条路径中可能会有产品。但是我不知道如何让系统知道应该有产品展示。

当然，我可以多次调用数据库，检查是否有更多类别，如果没有，则搜索产品并从那里开始。但我不认为这是正确的方法，因为这意味着对服务器和数据库的不必要调用。

谢谢！

【问题讨论】：

标签： html angularjs angular routing

【解决方案1】：

添加子路由。

{ path: 'products', component: ProductsComponent, children: [
   { path: ':productgroup', component: ProductRangeComponent }
  ]
}

另见https://angular-2-training-book.rangle.io/handout/routing/child_routes.html

【讨论】：

感谢您的回复！它看起来很有希望，但我有一个问题。子路由要求我在 productrange 组件中拥有产品页面。我希望他们在保持路由的同时拥有自己的页面。更清楚地说： -ProductsComponent 包含产品列表。 -ProductRangeComponent 包含产品组列表（例如计算机/笔记本电脑/平板电脑），它不包括实际的产品列表。