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

Question

我正在尝试从组件更新（添加，删除）queryParams。在angularJS中，它曾经有可能归功于：

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

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

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

这是新的路由器吗？

Answer 1

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

像（在组件中）的东西：

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

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

编辑：正如评论中已经指出的那样，[]和relativeTo属性在我的原始示例中缺失，所以它也可能改变了路线，而不仅仅是查询参数。在这种情况下，适当的this.router.navigate用法：

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

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

Answer 2

@RadosławRoszkowiak的答案几乎是正确的，除了需要relativeTo: this.route如下：

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

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

Answer 3

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

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

  this.router.navigateByUrl(urlTree); 

修改查询参数的“正确方法”可能是下面的createUrlTree，它从当前创建一个新的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); 
}

要以这种方式删除查询参数，您可以将其设置为undefined或null。

Answer 4

如果要更改查询参数而不更改路径。看下面的例子可能对你有帮助：当前路线是：/搜索和目标路线是（没有重装页面）：/ 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（['。']]

Answer 5

尝试

this.router.navigate([], { 
  queryParams: {
    query: value
  }
});

将用于除单引号之外的相同路线导航。

Answer 6

大多数投票的答案部分适用于我。浏览器网址保持不变，但导航后我的routerLinkActive不再工作。

我的解决方案是使用lotation.go：

import { Component } from "@angular/core";
import { Location } from "@angular/common";
import { HttpParams } from "@angular/common/http";

export class whateverComponent {
  constructor(private readonly location: Location, private readonly router: Router) {}

  addQueryString() {
    const params = new HttpParams();
    params.append("param1", "value1");
    params.append("param2", "value2");
    this.location.go(this.router.url.split("?")[0], params.toString());
  }
}

我使用HttpParams来构建查询字符串，因为我已经使用它来发送信息与httpClient。但你可以自己建造它。

和this._router.url.split("?")[0]，是从当前网址中删除所有以前的查询字符串。

Answer 7

首先，我们需要从角度路由器导入路由器模块并声明其别名

import { Router } from '@angular/router'; ---> import
class AbcComponent implements OnInit(){
constructor(
    private router: Router ---> decalre alias name
  ) { }
}

1.您可以使用“router.navigate”函数更改查询参数，并传递查询参数

this.router.navigate([], { queryParams: {_id: "abc", day: "1", name: "dfd"} 
});

它将更新当前即激活路径中的查询参数

2. 下面将重定向到abc页面，其中_id，day和name作为查询参数 this.router.navigate（['/ abc']，{queryParams：{_ id：“abc”，day：“1”，name：“dfd”}}）; 它将更新“abc”路径中的查询参数以及三个查询参数

用于获取查询参数： -

    import { ActivatedRoute } from '@angular/router'; //import activated routed

    export class ABC implements OnInit {

    constructor(
        private route: ActivatedRoute //declare its alias name
      ) {}

    ngOnInit(){
       console.log(this.route.snapshot.queryParamMap.get('_id')); //this will fetch the query params
    }