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

【问题标题】：How to pass variable query parameters with a routerLink in Angular 5如何在Angular 5中使用routerLink传递可变查询参数
【发布时间】：2018-06-26 22:32:09
【问题描述】：

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

此静态 HTML 与 routerlinkactive 一起使用，捕获 docview 页面中的参数...

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

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

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

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

解析器错误：在预期表达式的位置得到插值 ({{}}) 在 [['/docview', {[sDocName]:'{{sDocIDs[i]}}' }]] 的第 25 列

【问题讨论】：

标签： angularjs angular5 routerlink routerlinkactive

【解决方案1】：

查看Angular 5-Routing (Practical Guide)

突出重点：

更新路由表：

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

使用这种格式：

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

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

【讨论】：

这不是一个查询参数方法，而是一个不同的routerlink参数。

【解决方案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>

这对我来说效果很好。

【讨论】：

【解决方案3】：

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

【讨论】：

似乎不起作用。首先，我需要在 sDocIDs[i] 之后使用 [i] 来为此循环选择正确的索引变量。因此，我尝试了您的示例进行了一次更改并收到了...“TypeError：_co.sDocName 未定义”，这很有趣，因为在它被 : 分隔之前，它没有引发该错误。这正是我提出的符合您的建议的内容... routerLink="/docview/{{sDocName.sDocIDs[i]}}"