角4路由选择的类别/子类别或类别/项目电子商务网站(Angular 4 route selectio

我的路线是：

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

所以我的第二和第三个途径是相似的。

我不希望到url逻辑更改为类似：

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

如何我解决它，而不改变路线这样的限制？

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

<a [routerLink]="['/iphone','iphone6s']" component: ItemComponent>iPhone 6S</a>
<a [routerLink]="['/electronics','laptops']" component: ProductsComponent>Laptops</a>

Answer 1:

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

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 }
   ]
  }
];

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

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

下面的图片显示了一个更好的解释。 首先，我点击了电子，并选择苹果，和iphone。 希望这可以帮助。

文章来源: Angular 4 route selection for category/subcategory or category/item for ecommerce web site