角2。 我该如何使用存在的参数添加附加的queryParam路由？

Question

当我有URL时： http : //stack.com/abc?code=1而我想获得如下URL： http : //stack.com/abc?code=1&page=1

我想使用这种代码

let navigationExtras;
navigationExtras = {
  {preserveQueryParams: true},
  {queryParams: {page: 1}}
};

this.router.navigate(['/abc'], navigationExtras);

reserveQueryParams表示使用存在的参数。 和queryParams意味着附加新的参数。 但是，现在不能同时使用两者。

有什么好主意吗？ 而不使用“ this.route.subscribe（...）”

Answer 1

如果您从ActivatedRoute复制它们（可以注入到构造函数中），则可以更改现有参数或附加新参数，而无需使用preserveQueryParams 。

const currentParams = this.activatedRoute.snapshot.queryParams;
this.router.navigate(["/abc"], {
   queryParams: {...currentParams, "page": "1"},
});

Answer 2

您应该启用NavigationExtras preserveQueryParams选项，并更正如下所示的对象。

let navigationExtras;
navigationExtras = {
  preserveFragment: true,
  preserveQueryParams: true, //added parameter
  queryParams: {page: 1}
};

this.router.navigate([this.route.url], navigationExtras);