Angular 4 route selection for category/subcategory or category/item for ecommerce web site

问题

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>

回答1:

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.

来源：https://stackoverflow.com/questions/49221689/angular-4-route-selection-for-category-subcategory-or-category-item-for-ecommerc

标签

angular

angular-routing