如何在 Angular2 中追加/更新查询参数答案

【问题标题】：How to append/update query parameters in Angular2如何在 Angular2 中追加/更新查询参数
【发布时间】：2017-03-10 08:51:05
【问题描述】：

我在我的应用中使用了在导航和更新设置时想要保留/更新的查询参数。通过执行以下操作，我可以毫无问题地添加参数。

onNavigate() {
this.router.navigate(['reports'], {queryParams: {'report': this.chart}, preserveQueryParams:true});
}

但是我希望能够更改报告参数并将新参数附加到整个应用程序的 url 中。

使用preserveQueryParams: true 使我的参数成为只读的。我希望能够更新当前参数并添加新参数而不会丢失任何内容，除非我清除它们。

如何在不丢失当前设置的参数的情况下做到这一点？

【问题讨论】：

标签： angular typescript angular-routing

【解决方案1】：

preserveQueryParams 已被弃用，请改用 queryParamsHandling。

queryParamsHandling 用于配置策略来处理下一次导航的查询参数。

https://angular.io/api/router/NavigationExtras

【讨论】：

【解决方案2】：

我猜preserveQueryParams 并不是要代表应用程序附加/更新queryParams。

您必须编写逻辑以获取现有查询参数并根据您的要求对其进行更新，然后在导航时通过。

   this.route.queryParams.subscribe(qparams => {
     this.currentQueryParams= qparams;
   });

    updatedqueryParams = // use this.currentQueryParams update it to append\update new stuff
    let navigationExtras: NavigationExtras = {
      queryParams: updatedqueryParams
    };

    // Navigate to the login page with extras
    this.router.navigate(['<some path>'], navigationExtras);

preserveQueryParams 的目的是传递您要路由到的当前全局查询参数，

所以如果当前 URL 是

 dashboard?debug=true&somevar=1

然后你写下类似下面的东西，

  this.router.navigate(['admin'],  {
        preserveQueryParams: true
      }
 );

新路由将是，因此它保留了查询参数。

admin?debug=true&somevar=1

希望这会有所帮助！

【讨论】：