gpt4 book ai didi

Angular:如何在不更改路由的情况下更新 queryParams

转载 作者:太空狗 更新时间:2023-10-29 16:45:37 33 4
gpt4 key购买 nike

我正在尝试更新(添加、删除)组件中的 queryParams。在 angularJS 中,它曾经是可能的,这要归功于:

$location.search('f', 'filters[]'); // setter
$location.search()['filters[]']; // getter

我有一个应用程序,其中包含一个用户可以过滤、订购等的列表,我想在 url 的 queryParams 中设置所有激活的过滤器,这样他就可以复制/粘贴 url 或与其他人共享。

但是,我不希望每次选择过滤器时都重新加载我的页面

这对新路由器可行吗?

最佳答案

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

类似的东西(在组件中):

import {ActivatedRoute, Router} from '@angular/router';
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
) { }

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

关于Angular:如何在不更改路由的情况下更新 queryParams,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43698032/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com