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

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

给出的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

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

来源

2017-02-24 hdk

这是很简单的获得使用可能保持富= 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; 
}

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

来源

2017-02-24 08:17:56 hdk

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

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

来源

2017-02-24 06:28:37 davidejones

是啊，这似乎不与供应任何查询参数一起工作。 – hdk

嗯，它看起来像它会被覆盖仍然。这里看起来像一个很好的答案，可能有助于http://stackoverflow.com/questions/41726938/in-angular-2-how-to-preserve-query-params-and-add-additional-query-params-to- rou/41779740 – davidejones

为此欢呼。这本质上是一个相同的问题，并已确定地回答了我的问题（没有本机配置解决方案）。如果我想出一个简单的解决方案，我可能会发布它，否则这个问题是多余的。 – hdk

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

回答

相关问题