Angular 6中如何在routerlink中间添加查询参数

Question

如何将参数传递到routerlink中。

我想实现以下代码：

<p *ngFor="let supplier of suppliers">
   <a [routerLink]="['/supplier/{{supplier.businessId}}/products']">
        View Products
   </a>
</p>

- Robbie Mills

---

像这样做：-- <a routerLink="/product/productDetails/{{item.product.id}}" title="编辑"> <span class="glyphicon glyphicon-pencil"></span> - Aarsh

太好了！routerlink和[routerlink]之间有什么区别？ - Robbie Mills

Answer 1

您可以像下面这样在routerlink中访问查询参数。

 <a routerLink="/product/productDetails/{{item.product.id}}" title="Edit"> <span class="glyphicon glyphicon-pencil"></span> </a>

routerLink和[routerLink]之间有什么区别？

就您所提出的问题而言，在routerLink中，您可以直接像上面的代码示例中那样使用查询参数，但在[routerLink]中，您可以像这样设置查询参数。

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
  link to user component
</a>

欲知详情，请访问此链接：https://angular.io/api/router/RouterLink

- Aarsh

Answer 2

routerlink=""

这将分配等号右侧的内容。如果有一个包含{{}}的表达式，它将被计算并赋值。

例子 - routerlink="something" - 这里的something将作为字符串分配给routerlink

 [routerlink]=""

[] 强制对等号右侧进行求值。

例如 - [routerlink]="something" - 这里的 something 将被评估为属性，引擎将尝试在组件中找到一个名为 something 的属性，对其进行求值，然后将值赋给 routerLink。

- Suren Srapyan

---

这个比我的回答更容易理解。谢谢！ - Aarsh

Answer 3

根据你使用的Angular版本不同，但你也可以进行以下操作：

<p *ngFor="let supplier of suppliers">
   <a [routerLink]="['/supplier', supplier.businessId, 'products']">
        View Products
   </a>
</p>

这将消除需要使用大括号{{ }}的必要。

- Christian Phillips