Question

有一种简单的方法可以实现吗？

例如，我想将查询参数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设置为URL完全不变，它将用queryParamsHandling: 'preserve'替换所有查询参数。

Answer 1

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

要获取它们，请将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})

Answer 2

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

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

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

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

Answer 3

您需要通过当前的ActivatedRoute

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

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

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

如何导航到相同的URL，但更改（或添加（如果缺少的话））查询参数之一

3 个答案: