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

Question

是否可以配置路由器 links 简单地添加到查询字符串中，以便我们可以通过一系列 links 构建查询字符串？

鉴于 url:

http://localhost/app

页面上某处有一个 link 与此类似：

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

会 link 到：

http://localhost/app?foo=1

稍等一下link：

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

是否可以产生路线：

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

而不是覆盖当前查询字符串？我怀疑通过监听路由器事件并手动解决是可能的，但我想知道通过某些配置是否不可能？

Answer 1

有 preserveQueryParams 可能会在您导航到 bar=1 时保留 foo=1 我还没有尝试过，但文档说它可以像这样使用

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

Answer 2

从激活的路由中获取当前查询参数并根据需要对它们进行浅层复制并进行必要的修改以 returning 到路由器非常简单。

在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;
}

这将 return 路由器期望查询参数的键值对对象添加或覆盖任何现有参数。

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

Build query string params through a series of router links

routerlink

angular