用于电子商务网站的类别/子类别或类别/项目的Angular 4路由选择

Question

我的路线是：

text_write.txt

所以我的第二和第三条路线是相似的。

我不想将网址逻辑更改为：

{ path: ':categoryname', component: ProductsComponent},
{ path: ':categoryname/:subcategoryname', component: ProductsComponent},
{ path: ':categoryname/:itemname', component: ItemComponent},
{ path: ':categoryname/:subcategoryname/:itemname', component: ItemComponent},

如何在不改变路线限制的情况下解决它？

有没有办法强制通过[routerLink]或类似的方式选择路由：

{ path: 'category/:categoryname/:subcategoryname', component: ProductsComponent},
{ path: 'item/:categoryname/:itemname', component: ItemComponent},

Answer 1

我的应用程序也是一个大型购物车。我建议你使用延迟加载，这样你的路由将很容易实现和扩展。我有很多类别，包括具有许多子类别和品牌的电子类别。我的Apple路线如下。

const routes: Routes = [
{ path: 'apple', component: AppleComponent,
  children: [
    { path: 'h/apple', component: AppleAccessoryComponent },
    { path: 'iwatch', component: IwatchComponent },
    { path: 'about iphone', component: IphoneAboutComponent},
    { path: 'about ipad', component: IpadAboutComponent },
    { path: 'iphone', component: IphoneComponent },
    { path: 'apple about', component: AppleAboutComponent },
    { path: 'mac', component: MacComponent },
    { path: ':id', component: AppleDetailComponent },
    { path: '', component: AppleHomeComponent }
   ]
  }
];

我的ProductList组件不是我的路由的一部分，而是一个可重用的组件。下面是我的AppleProductDetail.component。

<rb-product-list [query]="productQuery" ></rb-product-list>

下面的图片显示了更好的解释。首先我点击了Electronics，然后选择apple和iphone。希望这会有所帮助。