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

Question

在*ngFor循环中，我正在构建一个带有示例读取文本的搜索结果列表(mat卡)，我希望允许用户单击其中一个来读取更多内容，并打开一个路径到一个带有正确文档的文档模板。

此静态HTML与路由器链接活动一起工作，以捕获docview页面中的params .

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

我希望通过*ngFor将硬编码的Doc 'AW010001‘替换为每个迭代的适当ID。但是这个代码失败了..。

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

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

解析器错误: Got插值({{}})，其中表达式预期在[['/docview'，{sDocName：{{sDocIDsi}]第25列]

Answer 1

实际上..。最后，我将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 2

查看角5-路由(实用指南)

要高明要点：

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 3

使用ngFor循环，我想您只需要这样的东西:routerLink=“/docview/{sDocName.sDocIDs}”+组件中的适当函数转到angular.io，示例如教程所示