angular2。如何使路径追加带有存在参数的queryParam？

Question

当我有网址时：http://stack.com/abc?code=1 我希望获得以下网址：http://stack.com/abc?code=1&page=1

我想使用这种代码

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

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

preserveQueryParams表示使用exists params。 和queryParams意味着追加新的参数。 但是现在使用两者并不起作用。

有什么好主意吗？不使用＆＃34; this.route.subscribe（...）＆＃34;

Answer 1

如果您从preserveQueryParams复制它们（可以在构造函数中注入），则可以更改现有的params或添加新的params而不使用ActivatedRoute。

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

Answer 2

您应该在preserveQueryParams中启用NavigationExtras选项，同时更正下面的对象。

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

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