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

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

类似于（在组件中）：

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 中删除参数。

---

@Radosław Roszkowiak 的回答几乎是正确的，除了 relativeTo: this.route 是必需的，如下所示：

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

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

---

在 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。

---

投票最多的答案部分对我有用。浏览器 url 保持不变，但导航后我的 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] 是从当前 url 中删除所有以前的查询字符串。

---

尝试

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

将适用于单引号以外的相同路线导航。

---

如果您想更改查询参数而不更改路由。看下面的例子可能对你有帮助：当前路线是：/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( ['.']

---

我最终将 urlTree 与 location.go 结合起来

const urlTree = this.router.createUrlTree([], {
       relativeTo: this.route,
       queryParams: {
           newParam: myNewParam,
       },
       queryParamsHandling: 'merge',
    });

    this.location.go(urlTree.toString());

不确定 toString 是否会导致问题，但不幸的是，location.go 似乎是基于字符串的。

---

更好的是 - 只是 HTML：

<a [routerLink]="[]" [queryParams]="{key: 'value'}">Your Query Params Link</a>

注意空数组，而不是只做 routerLink="" 或 [routerLink]="''"

---

Angular 的 Location 服务应该在与浏览器的 URL 交互时使用，而不是用于路由。这就是我们要使用 Location 服务的原因。

Angulars HttpParams 用于创建查询参数。请记住 HttpParams 是不可变的，这意味着在创建值时必须将其链接起来。

最后，使用 this._location.replaceState 更改为 URL 而无需重新加载页面/路由和原生 js location.path 获取不带参数的 url 以每次重置参数。

constructor(
    private _location: Location,
) {}

...

updateURLWithNewParamsWithoutReloading() {
    const params = new HttpParams().appendAll({
        price: 100,
        product: 'bag'
    });

    this._location.replaceState(
        location.pathname,
        params.toString()
    );
}

---

首先，我们需要从 Angular 路由器中导入路由器模块并声明它的别名

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

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

下面将重定向到带有 _id、day 和 name 作为查询参数的 abc 页面 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
    }

---