Angular中带有routerLink链接的动态查询参数答案

【问题标题】：Dynamic queryParams with a routerLink link in AngularAngular中带有routerLink链接的动态查询参数
【发布时间】：2017-10-04 21:40:46
【问题描述】：

我正在尝试在循环中将参数传递给我的 routerLink。下面是对象数组的样子：

这是带有 routerLink 链接的循环：

<li *ngFor="let Achievement of AllAchievements">

    example from multiple sources
    does not work with a variable 'x'. Outputs the letter x
    <a routerLink="page" [queryParams]="{x : 1}">anchor text</a> 

    example from multiple sources
    link is outputted /%5B'page',%20%7BAchievement.type%20:%20'hello'%7D%20%5D'
    <a routerLink="['page', {Achievement.type : 'hello'} ]">anchor text</a>

    outputs long/encoded string as param value 
    <a [routerLink]="['page']" queryParams="{ [Achievement.type] : 'hello' }">anchor text</a>
</li>

所需输出：<a href="page?position=hello"></a>

【问题讨论】：

我不确定我是否理解您的要求...您希望行为与您提供的代码有何不同？
@KevinAud 我很抱歉。我已经用所需的输出更新了问题 = 带有查询参数的传统链接。
您似乎无法将[queryParams] 的键设为动态值，但值本身可以是动态的。您可能需要重新考虑您的方法。
哇，我认为你是对的@R。理查兹。在网上找不到任何东西。文档说 queryParams: {[k: string]: any} 没有发现任何关于它不能成为动态的东西。
我试图让它工作，但我最终得到了运行时错误。也许你可以创建一个payload 键，并在值中传递一些来自 json 的值，也许有一个很好的分隔符。

标签： angular angular-router routerlink queryparam

【解决方案1】：

老问题，但我刚刚遇到这个问题，由于没有答案，这是我想出的解决方案。处理密钥的简单中间人函数

getRouterParams (key: string, value: string) {
  return { [key]: value };
}

那么你的 HTML 会是这样的

<a [routerLink]="['page']" [queryParams]="getRouterParams(Achievement.type, 'hello')">anchor text</a>

也适用于插值字符串，这是我需要它的情况

<a [routerLink]="['page']" [queryParams]="getRouterParams('achievement__' + Achievement.type, 'hello')">anchor text</a>

【讨论】：