如何在Angular2中更新矩阵参数答案

【问题标题】：How to update matrix parameters in Angular2如何在Angular2中更新矩阵参数
【发布时间】：2017-05-03 12:30:46
【问题描述】：

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

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

到同样的东西，但 currentPage 在分页时更新：

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

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

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

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

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

编辑：还应该提到可能有任意数量的附加键/值对矩阵参数，所以硬编码任何路线都是不可能的

编辑：我已经尝试使用preserveQueryParams: true 喜欢：

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

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

更新：我已经实现了自己的逻辑来获得所需的行为，所以这里有一个解决方案的代码 sn-p：

  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._router.navigate([this._router.url, {currentPage: this.pagination.currentPage}], {preserveQueryParams: true});
听起来是正确的道路！只是试了一下，没有骰子。我认为这个问题与 this._router.url 是一个字符串有关（它仍然对分号进行编码）。是否有更复杂的对象可以使用 navigate 方法，它仍然显式包含查询参数？
这让我几乎在我想要的地方：this._router.navigate(["..", {currentPage: this.pagination.currentPage}]);，除了它抛出了其他查询参数。还尝试在此处添加 {preserveQueryParams: true} 并没有改变行为
我猜您需要使用this._router.createUrlTree() 构建一个新的 urlTree，您可以在其中通过从ActivatedRoute 或this._router..routerState 获取构建路由的部分并遍历路由树以获取所有部分.我不知道更简单的方法。
@GünterZöchbauer 制作 urlTree 是对的。我认为这可能是最干净的方法。我已经在答案中发布了实现

标签： javascript angular angular-ui-router

【解决方案1】：

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

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

使用merge可以添加、更新、减去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);

【讨论】：

在这种情况下merge 是什么？你是从哪里导入的？
@Zlatko 我最终使用了Object.assign()
只是想补充一点，现在我们可以这样做了： const newUrl = {... route.snapshot.params, ...{'a': 123}}
@jostyposty 说得好
此解决方案将新的矩阵参数附加到 URL 的末尾，这对我的用例来说是错误的行为

【解决方案2】：

您是否尝试过使用类似的东西

this._router.navigateByUrl('/search;term='+this.term+';pageSize='+this.pageSize+';currentPage='+this.currentPage+';someFilter='+this.someFilter;

【讨论】：

我认为这行不通。矩阵参数是添加到子段的查询参数。
@GünterZöchbauer 不确定“添加到子段的查询参数”是什么意思。我目前正在使用矩阵参数作为可选参数，类似的方法对我来说效果很好。
queryParams 使用NavigationExtras angular.io/docs/ts/latest/api/router/index/…, angular.io/docs/ts/latest/api/router/index/… 添加
@GünterZöchbauer 感谢您的澄清，但我仍然不明白为什么这种方法不起作用，因为所有参数都将以与他最初提供的相同格式应用于 /search 路线
当我有时间检查它是否真的有效时，我会仔细看看。

【解决方案3】：

在我的例子中，我有一个父子路由器，我需要修改父级的参数： /my-parent;x=1;y=2/my-child

使用@Corbfon 的解决方案，我能够像这样修改父路由：

    // modify the context params in the PARENT route
    const newParam = {'z': '3'};
    const parentParams: Params = Object.assign({ ...this.activatedRoute.parent.snapshot.params }, newParam);

    // note: this approach doesn't preserve params on the child route (but there aren't any in my case)
    const currentChildPath = this.activatedRoute.routeConfig.path;

    // notice it's relativeTo the parent route
    const newUrl = this.router.createUrlTree([parentParams, currentChildPath],
      {relativeTo: this.activatedRoute.parent});
    this.router.navigateByUrl(newUrl);

希望这对其他人有所帮助。

附：不要忘记在ActivatedRoute 上使用.snapshot.params 而不是.params。

【讨论】：