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

Question

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

给定网址：

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

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

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

Answer 2

从激活的路由中获取当前查询参数并在返回路由器时进行必要的修改浅复制它们很简单。

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

这将返回路由器期望查询参数的键值对对象，其中添加或覆盖有问题的参数，任何现有参数都完好无损。