电子商务网站的类别/子类别或类别/项目的 Angular 4 路由选择 [英] Angular 4 route selection for category/subcategory or category/item for ecommerce web site

问题描述

我的路线是:

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

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

我不想将 url 逻辑更改为:

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

如何在不改变路线的情况下解决这些限制?

有没有办法通过 [routerLink] 或类似的东西强制选择路由:

My routes are:
{ path: ':categoryname', component: ProductsComponent},
{ path: ':categoryname/:subcategoryname', component: ProductsComponent},
{ path: ':categoryname/:itemname', component: ItemComponent},
{ path: ':categoryname/:subcategoryname/:itemname', component: ItemComponent},
So my 2nd and 3rd route are similar. 

I do not want to change the url logic to something like:
{ path: 'category/:categoryname/:subcategoryname', component: ProductsComponent},
{ path: 'item/:categoryname/:itemname', component: ItemComponent},
How to I work around it without change the route such limitations?

Is there a way to force route selection through [routerLink] or anything like:
<a [routerLink]="['/iphone','iphone6s']" component: ItemComponent>iPhone 6S</a>
<a [routerLink]="['/electronics','laptops']" component: ProductsComponent>Laptops</a>

解决方案
My app is a large scale shopping cart also. I advice you to use lazy loading so that your routing will be very easy to implement and expand. I have many categories including electronic category with many sub categories and brands. My routing for Apple is below.
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 }
   ]
  }
];
My ProductList component is not part of my routing but rather a reusable component. Below is my AppleProductDetail.component.
<rb-product-list [query]="productQuery" ></rb-product-list>
Image below shows you a better explanation. First I clicked on Electronics, and choose apple, and the iphone. Hope this helps.



                        
这篇关于电子商务网站的类别/子类别或类别/项目的 Angular 4 路由选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！