gpt4 book ai didi

javascript - 如何更新 Angular2 中的矩阵参数

转载 作者:太空狗 更新时间:2023-10-29 17:36:06 26 4
gpt4 key购买 nike

在 Angular2 中,有没有办法更新矩阵参数,但导航到同一个组件?基本上想从一个看起来像这样的 url 轻松转换:

/search;term=paris;pageSize=24;currentPage=1;someFilter=value;

同样的事情,但是 currentPage 在分页时更新:

/search;term=paris;pageSize=24;currentPage=2;someFilter=value;

使用 router.navigate 似乎不是最佳选择,因为我必须编写大量自己的逻辑来重新构造 navigate 的 url > 的使用(重新构造已经存在的东西)。

对于踢腿和咯咯笑,我确实尝试过

this._router.navigate([this._router.url, {currentPage: this.pagination.currentPage}]);

但是(如您所料),路由器对当前 url 上有矩阵参数这一事实很愚蠢,因此结果并不漂亮。

编辑:还应该提到矩阵参数可能有任意数量的附加键/值对,因此硬编码任何路由都是不可能的

编辑:我已经尝试使用 preserveQueryParams: true 像:

this._router.navigate(["..", {currentPage: this.pagination.currentPage}], {preserveQueryParams: true});

为了获得易于使用/可转移的解决方案,但这并没有使矩阵参数保持在路线上。

更新:我已经实现了自己的逻辑来获得所需的行为,所以这里是解决方案的代码片段:

  let currentParamsArr: Params = this.route.snapshot.params;
let currentParamsObj: any = { };
for (let param in currentParamsArr) {
currentParamsObj[param] = currentParamsArr[param];
}
currentParamsObj.currentPage = +pageNum; //typecasting shortcut

this._router.navigate([currentParamsObj], { relativeTo: this.route });

此代码循环遍历参数(就像它们在快照中一样),并从中创建一个对象,然后添加/编辑我希望更新的参数,然后导航到"new"路由

但是,这并不漂亮,因为我基本上在程序的许多地方都有相同的逻辑,或者必须对 Router 进行修改或提供一些其他通用方法。

最佳答案

最终对我有效的方法是这样的:

let route: ActivatedRoute;
const newUrl = router.createUrlTree([
merge({'a': 123}, route.snapshot.params)
], {relativeTo: route});

通过使用合并,您可以添加、更新和减去 url 参数,然后使用 router.navigateByUrl(newUrl) 来执行。

add: merge({newParam: 111}, route.snapshot.params)

update: merge({param: 111}, route.snapshot.params)

subtract: merge({param: null}, route.snapshot.params)

希望其他人发现这和我一样有用。

另一个使用 Object.assign 而不是 merge 的例子:

let route = this.route; // The imported ActivatedRoute
let currentParamsObj: Params = Object.assign({}, route.snapshot.params);

let newParam = {};
newParam[key] = value;

let newUrl = this._router.createUrlTree([
Object.assign(currentParamsObj, newParam)
], {relativeTo: this.route });

this._router.navigateByUrl(newUrl);

关于javascript - 如何更新 Angular2 中的矩阵参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41205929/

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