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

Question

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

这个静态 HTML 与 routerlinkactive 一起工作，捕捉 docview 页面中的参数...

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

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

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

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

Parser Error: Got interpolation ({{}}) where expression was expected at column 25 in [['/docview', {[sDocName]:'{{sDocIDs[i]}}' }]]

Answer 1

使用 ngFor 循环我猜你只需要这样的东西：routerLink="/docview/{{sDocName.sDocIDs}}" + 组件中的适当功能转到 angular.io，教程中显示了示例

Answer 2

实际上...我最终将 routerLink 功能移动到我的 .ts 文件中该组件的函数中...

  readMore(sDoc: string) {
    this.router.navigate(['/docview', {sDocName: sDoc}]);
    window.scrollTo(0, 0);
  }

然后在我的 HTML 中，我使用一个与所有其他故事元数据关联的变量...在这种情况下，我使用数组进行开发，但最终会用一个元素替换该数组变量故事的数据模型。

<button mat-raised-button (click)="readMore(DocIDs[i])">READ MORE...</button>

这对我来说效果很好。

Answer 3

要high-light要点：

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

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

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

How to pass variable query parameters with a routerLink in Angular 5