如何导航到相同的URL但更改（或添加，如果错过）其中一个查询参数

Posted 2021-04-06

有没有一种简单的方法来实现这一目标？

例如，我想将查询参数qp设置/更改为值111：

/p1/ ----> /p1/?qp=111
/p2/ ----> /p2/?qp=111
/p1/?ee=22 ----> /p1/?ee=22&qp=111
/p1/?ee=22&qp=222 ----> /p1/?ee=22&qp=111

等等

我试图做router.navigate([], { queryParams: { qp: '111' } });但它只是用qp=111替换所有查询参数，如果我设置queryParamsHandling: 'preserve' URL根本没有改变...

答案

首先，我们需要获取现有的查询参数

const queryParams: Params = Object.assign({}, this.activatedRoute.snapshot.queryParams);

// Do something with the params
queryParams['myParam'] = 'myNewValue';

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

另一答案

您可以与当前查询参数合并。

要抓住它们，将ActivatedRouteSnapshot注入routeSnap并访问查询参数

const oldParams = this.routeSnap.queryParams

您还可以通过注入ActivatedRoute并使用this.route.snapshot.queryParams访问查询参数来获取此对象。

在您的示例中，这将为您提供：

/p1/              ----> {}
/p2/              ----> {}
/p1/?ee=22        ----> {ee: 22}
/p1/?ee=22&qp=222 ----> {ee: 22, qp: 222}

现在，您可以通过合并此对象进行导航。

this.router.navigate([], {...oldParams, qp: 11})

另一答案

你需要传递你当前的ActivatedRoute

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

  constructor(
    private activatedRoute: ActivatedRoute
  ) {
    this.routeSnapshot = activatedRoute.snapshot['_routerState'].url;
  }

  this.router.navigate([this.routeSnapshot], {queryParams: { qp: '111' }});