时间戳

首页 > 解决方案 > 带有 url 关键字的 Angular 路由器

angular - 带有 url 关键字的 Angular 路由器

问题描述

我正在尝试为以下 url 组合设置路径

所有这些 url 都应该匹配一个组件 CarSaleComponent。同样，boats-for-sale 的 URL 集应该实例化 BoatSaleComponent 等等

 { path: ':param1', component: CarSaleComponent }, 
 { path: ':param1', component: BoatSaleComponent }, 
 { path: 'contact', component: ContactComponent }

这不起作用，因为 /contact 还将匹配第一个路径并实例化 CarSaleComponent。我正在使用一种解决方法

 { path: 'cars/:param1', component: CarSaleComponent }, 
 { path: 'boats/:param1', component: BoatSaleComponent },
 { path: 'contact', component: ContactComponent }

是否可以根据“cars-for-sale”或“boats-for-sale”子字符串匹配路径？

标签： angular

解决方案

有两种方法可以做到这一点。

  1. 您可以在 URL 中传递参数来告诉销售boat/car。根据您显示/隐藏CarSaleComponent/的输入BoatSaleComponent。不好的一面是，如果您添加更多待售商品，您可能需要添加一个启用/禁用组件列表的配置。

  2. 您可以为每个项目创建路由item-for-sale并在查询中传递必要的信息。

 { path: 'car-for-sale', component: CarSaleComponent }, 
 { path: 'boat-for-sale', component: BoatSaleComponent }, 
 { path: 'contact', component: ContactComponent }

您还可以创建一个销售模块并在用户尝试访问此特定信息时延迟加载它。您还可以为其下的不同项目创建子路由并相应地路由它们。

此外，路由匹配基于它们在从上到下的路由中定义的方式。因此，请始终以最终匹配根的方式放置它们/。

推荐阅读