如何在 Angular 5 中使用 routerLink 传递可变查询参数

Question

在 *ngFor 循环中，我正在构建带有示例阅读文本的搜索结果（垫卡）列表，我希望允许用户单击其中一个来阅读更多内容，并打开一条通往填充的文档模板的路径与正确的医生。

这个静态 HTML 与 routerlinkactive 一起使用，捕获文档视图页面中的参数...

<button mat-button [routerLink]="['/docview', {sDocName: 'AW010001'}]">READ MORE...</button>

我想将硬编码的文档 ID 'AW010001' 替换为通过 *ngFor 的每次迭代的适当 ID。但是这段代码失败了...

<button mat-button [routerLink]="['/docview', {sDocName: '{{sDocIDs[i]}}'}]">READ MORE...</button>

我得到的错误是典型的......

解析器错误：获得插值 ({{}})，其中表达式应位于 [['/docview', {[sDocName]:'{{sDocIDs[i]}}' }]] 中的第 25 列

Answer 1

查看Angular 5-Routing（实用指南）

强调要点：

1. 更新路由表：

{ path: 'book/:id', component: BookDetailsComponent, }

2. 使用这种格式：

<a [routerLink]="['/book',b.Id]">Details</a>

所以在你的例子中我认为它应该是这样的： <button mat-button [routerLink]="['/docview', sDocIDs[i]">READ MORE...</button>