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

问题描述

我的路线是:

{ 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.

我不想将url逻辑更改为:

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?

有没有一种方法可以通过[routerLink]或类似的方法来强制选择路线:

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>

推荐答案

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

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

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

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>

下面的图片为您提供了更好的解释.首先，我单击电子产品"，然后选择苹果"和"iphone".希望这会有所帮助.

Image below shows you a better explanation. First I clicked on Electronics, and choose apple, and the iphone. Hope this helps.

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