如何有效地向Angular 7路由添加参数?

时间:2019-04-04 14:17:48

标签: angular angular-routing

因此,我试图在我的电子商务中添加一个简单的详细信息部分。两条路径如下所示:

{ path: 'items', component: ItemListComponent},
{ path: 'items/details/:id', component: ItemDetailComponent},

这是我来自ItemList组件模板的routerlink:

<a routerLink="['/items/details',item.id]">See Details</a>

但是,当我单击按钮时,我的URL不是/ items / details / {id}。复制链接地址可以得到以下信息:/items/%5B'/items/details',item.id%5D

我的方法有什么问题,我该如何解决?我只希望我的按钮从项目到项目/详细信息/ {id}。我的item.id确实包含正确的值,不是吗。

我也收到错误消息:

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'items/%5B'/items/details',item.id%5D'

错误:无法匹配任何路由。 URL段:'items /%5B'/ items / details',item.id%5D'

1 个答案:

答案 0 :(得分:3)

您需要将routerLink括在方括号中:

<a [routerLink]="['/items/details',item.id]">See Details</a>