时间戳

首页 > 解决方案 > 如何导航到相同的 URL，但更改（或在错过时添加）查询参数之一

angular - 如何导航到相同的 URL，但更改（或在错过时添加）查询参数之一

问题描述

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

例如，我想将查询参数设置/更改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

ETC

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

标签： angularangular-ui-router

解决方案

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

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

推荐阅读