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

Question

我正在尝试更新(添加、删除)组件中的 queryParams。在 angularJS 中，它曾经是可能的，这要归功于:

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

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

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

这对新路由器可行吗？

Answer 1

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

类似的东西(在组件中):

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

constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
) { }

public myMethodChangingQueryParams() {
  const queryParams: Params = { myParam: 'myNewValue' };

  this.router.navigate(
    [], 
    {
      relativeTo: activatedRoute,
      queryParams: queryParams, 
      queryParamsHandling: 'merge', // remove to replace all query params by provided
    });
}

请注意，虽然它不会重新加载页面，但它会将一个新条目推送到浏览器的历史记录中。如果您想在历史记录中替换它而不是在那里添加新值，您可以使用 { queryParams: queryParams, replaceUrl: true }。

编辑: 正如评论中已经指出的那样，[] 和 relativeTo 属性在我的原始示例中丢失了，因此它也可以更改路由，而不仅仅是查询参数。在这种情况下，正确的 this.router.navigate 用法是:

this.router.navigate(
  [], 
  {
    relativeTo: this.activatedRoute,
    queryParams: { myParam: 'myNewValue' },
    queryParamsHandling: 'merge'
  });

将新参数值设置为 null 将从 URL 中删除该参数。