Angular：如何在不改变路由的情况下更新queryParams

我正试图从一个组件中更新（添加、删除）queryParams。在angularJS中，这曾经是可能的，这要归功于.NET：

$location.search('f', 'filters[]'); // setter
$location.search()['filters[]'];    // getter

我有一个应用程序，有一个用户可以过滤、排序等的列表，我想在url的queryParams中设置所有激活的过滤器，这样他就可以复制/粘贴url或者与其他人分享。

但是，我不希望每次选择过滤器时，我的页面都被重新加载。

这在新的路由器上可以做到吗？

Jota.Toledo
已编辑的问题 6日 十月 2017 в 8:55
编程
angular query-parameters angular-router
29日 四月 2017 в 4:33
1个视图

你可以用新的查询参数导航到当前路线，这不会重新加载你的页面，但会更新查询参数。

类似于（在组件中）：

Phil
编辑本段答案18日 七月 2019 в 7:53
评论(11)

在Angular 5中，你可以通过解析当前的url，轻松获得并修改urlTree的副本。这将包括查询参数和片段。

  let urlTree = this.router.parseUrl(this.router.url);
  urlTree.queryParams['newParamKey'] = 'newValue';

  this.router.navigateByUrl(urlTree);

修改查询参数的"正确方法"可能是用 createUrlTree，就像下面这样，它从当前的UrlTree创建一个新的UrlTree，同时让我们使用NavigationExtras来修改它。

import { Router } from '@angular/router';

constructor(private router: Router) { }

appendAQueryParam() {

  const urlTree = this.router.createUrlTree([], {
    queryParams: { newParamKey: 'newValue' },
    queryParamsHandling: "merge",
    preserveFragment: true });

  this.router.navigateByUrl(urlTree); 
}

为了以这种方式删除查询参数，你可以将其设置为 "未定义 "或 "空"。

评论(1)

如果你想改变查询参数而不改变路线，请看下面的例子 例子可能对你有帮助： 当前路线是：/search & 目标路径是（不需要重新加载页面）：/search?query=love

submit(value: string) {
{ this.router.navigate( ['.'],  { queryParams: { query: value } })
    .then(_ => this.search(q));
}
search(keyword:any) { 
//do some activity using }

请注意：你可以使用this.router.navigate( ['search']而不是this.router.navigate( ['.']。

评论(1)