如何在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的url(重新构造已经存在的内容) ).

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

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

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

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

通过使用合并，您可以添加，更新和减去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.params);

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

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

this._router.navigateByUrl(newUrl);

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