如何在 Angular2 中更新矩阵参数 [英] How to update matrix parameters in Angular2

问题描述

在 Angular2 中，有没有办法更新矩阵参数，但导航到同一个组件?基本上想从如下所示的网址轻松转换:

In Angular2, is there a way to update a matrix parameter, but navigate to the same component? Basically would like to transition easily from a url that looks like:

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

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

to the same thing, but with currentPage updated upon pagination:

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

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

using router.navigate hasn't appeared to be the best option, since I'd have to write plenty of my own logic to re-construct the url for navigate's use (re-constructing something that already exists).

为了踢球和傻笑，我确实尝试过

For kicks and giggles, I did try

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

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

but (as you might expect), the router is dumb to the fact that there are matrix parameters on the current url, so the result is not pretty.

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

Should also mention that there may be any number of additional key/value pairs of matrix parameters, so hard-coding any route is out of the question

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

I've since tried to use preserveQueryParams: true like:

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

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

in order to get to an easily usable/transferable solution, but that did not keep the matrix params on the route.

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

UPDATE: I've since implemented my own logic to get the required behavior, so here's a code snippet for the solution:

  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 });

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

This code loops through the parameters (as they stand in the snapshot), and creates an object out of them, then adds/edits the parameter that I desire to update, then navigates to the "new" route

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

But, this is not pretty, as I'll essentially have this same logic in many places of the program or have to make a modification to Router or provide some other generic method.

推荐答案

对我来说效果很好的方法是这样的:

The approach that ended up working well for me is this:

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

通过使用merge，可以对url参数进行增删改查，然后使用router.navigateByUrl(newUrl)来执行.

By using merge, you can add, update and subtract url parameters and then use router.navigateByUrl(newUrl) in order to execute.

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

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

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

希望其他人觉得这和我一样有用.

Hope others find this as useful as I have.

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

Another example using Object.assign instead of 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);

这篇关于如何在 Angular2 中更新矩阵参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！