如何在Angular2

时间:2016-12-18 06:06:14

标签: javascript angular angular-ui-router

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

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

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

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

使用router.navigate似乎不是最佳选择,因为我必须编写大量自己的逻辑来重新构建navigate&#39的网址; s使用(重新构建已经存在的东西)。

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

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

但是(正如你所料),路由器对于当前网址上有矩阵参数的事实是愚蠢的,所以结果并不漂亮。

编辑:还应该提到可能有任意数量的矩阵参数的附加键/值对,因此难以对任何路径进行硬编码

编辑:我曾尝试使用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"路线

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

3 个答案:

答案 0 :(得分:3)

最终适合我的方法是:

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.params);

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

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

this._router.navigateByUrl(newUrl);

答案 1 :(得分:1)

您是否尝试过使用类似

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

答案 2 :(得分:0)

在我的情况下,我有一个父级和子级路由器,需要修改父级上的参数: /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);

希望这对其他人有帮助。

P.S。不要忘记在.snapshot.params上使用.params而不是ActivatedRoute