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

Question

在 *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 列预期表达式出现插值 ({{}})

score 4 · Accepted Answer

强调要点：

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

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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