通过一系列路由器链接构建查询字符串参数

Question

是否可以将路由器链接配置为仅添加到查询字符串中，以便我们可以通过一系列链接构建查询字符串？

给出的URL：

http://localhost/app 

而且某处在页面上类似下面的链接：

<a [routerLink]="['.']" [queryParams]="{ foo: 1 }">link 1</a> 

会链接到：

http://localhost/app?foo=1 

有第二个环节：

<a [routerLink]="['.']" [queryParams]="{ bar: 1 }">link 2</a> 

是否有可能产生的路线：

http://localhost/app?foo=1&bar=1 

，而不是覆盖当前的查询字符串？我怀疑这是可能的，通过听取路由器事件并手动处理它，但我想知道是否不可能通过某种配置？

Answer 1

这是很简单的获得使用可能保持富= 1 preserveQueryParams当前查询参数来自激活的路由，并根据需要进行浅度复制，以便返回路由器。

在HTML：

<a [routerLink]="['.']" [queryParams]="getQueryParams(1)">link 1</a> 

在组件

：

getQueryParams(id: number) { 
    //this.queryParams retrieved by subscribing to the activated route on init 
    let queryParams = Object.assign({}, this.queryParams); 
    queryParams['foo'] = id; 
    return queryParams; 
} 

它将返回键值对对象路由器预计，与所讨论的参数或者加入或查询参数与任何现有的完全重叠。

Answer 2

有在导航时吧= 1我还没有尝试过，但该文件说可以这样

<a [routerLink]="['.']" [queryParams]="{ bar: 1 }" preserveQueryParams>link 2</a>