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

angular HttpParams用于创建查询参数。请记住HttpParams是不可变的，这意味着在创建值时它必须被链接。

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

constructor(
    private _location: Location,
) {}

...

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

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

大多数人投票的答案在一定程度上对我有用。浏览器的url保持不变，但我的routerLinkActive在导航后不再工作。

我的解决方案是使用lotit .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中删除所有之前的查询字符串。

首先，我们需要从angular router导入router模块，并声明它的别名

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

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

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

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

下面将重定向到abc页面_id，日 和name作为查询参数 this.router。导航([' / abc '], {queryParams: {_id:“abc”,天:“1”,名称: “目前”} })； 它将更新“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
    }

Try

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

将工作于同一路线导航，而不是单引号。

我最终把urlTree和location.go结合起来

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

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

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

我遇到过一个有趣的情况，我们对所有的路线只使用了一个组件。这是路线的样子:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: 'companies', component: HomeComponent },
      { path: 'pipeline', component: HomeComponent },
      // ...
    ]
  },
  // ...
];

基本上，paths / /companies和/pipeline都有相同的组件需要加载。而且，由于Angular会阻止组件在DOM中之前被加载，所以Router的navigate方法会返回一个总是以null解析的Promise。

为了避免这种情况，我不得不使用onSameUrlNavigation。通过设置这个值为'reload'，我设法使路由器导航到相同的URL与更新的查询字符串参数:

@NgModule({
  imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
  exports: [RouterModule]
})