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

Question

在一个* ngFor循环中，我正在构建一个包含样本阅读文本的搜索结果列表（mat卡），我想让用户点击其中一个来阅读更多内容，然后打开一个到用正确的文档填充的文档模板。

这个静态HTML与routerlinkactive一起在docview页面中捕获params ...

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

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

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

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

  

分析器错误：得到插值（{{}}），其中表达式是预期的   在[['/ docview'，{[sDocName]：'{{sDocIDs [i]}}}}}]第25栏第25页

Answer 1

查看Angular 5-Routing (Practical Guide)

突出要点：

1. 更新路线表：

  

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

1. 使用以下格式：

  

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

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

Answer 2

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

中

Answer 3

实际上......我最终将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>

这对我来说效果很好。