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

Question

我正在尝试从组件更新（添加，删除）查询参数。在angularJS中，由于：

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

我有一个应用程序，其中包含用户可以过滤，排序等列表，我想在url的查询参数中设置所有激活的过滤器，以便他可以复制/粘贴URL或与其他人共享。

Answer 1

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

  this.router.navigateByUrl(urlTree); 

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

Answer 2

js prettyprint-override">constructor(
    private router: Router,
    private route: ActivatedRoute,
) {}

changeQuery() {
    this.router.navigate(['.'], { relativeTo: this.route, queryParams: { ... }});
}

Answer 3

类似于（组件中）：

constructor(private router: Router) { }

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

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

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

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

js prettyprint-override">this.router.navigate(
  [], 
  {
    relativeTo: this.activatedRoute,
    queryParams: { myParam: 'myNewValue' },
    queryParamsHandling: 'merge'
  });