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

发布时间：2020-12-17 18:05:33 所属栏目：安全来源：网络整理

导读：我在我的应用程序中使用查询参数,我想在导航和更新设置时保留/更新.通过执行以下操作,我可以毫无问题地添加参数. onNavigate() {this.router.navigate(['reports'],{queryParams: {'report': this.chart},preserveQueryParams:true});} 但是,我希望能够更改

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

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

但是,我希望能够更改报告参数,并在我的应用程序中将新的参数添加到网址中.

使用preserveQueryParams：true使我的params只读.我希望能够更新当前的params并添加新的params而不会丢失任何东西,除非我清除它们.

如何在不丢失当前设置的参数的情况下执行此操作？

解决方法

我想preserveQueryParams并不意味着代表应用程序追加/更新queryParams.

您必须编写逻辑以获取现有查询参数并根据您的要求进行更新,然后在导航时传递.

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

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

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

preserveQueryParams的用途是传递您要路由的当前全局queryParams,

所以如果当前的URL是

dashboard?debug=true&somevar=1

你写下面的东西,

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

新路由将是,所以它保留查询参数.

admin?debug=true&somevar=1

希望这可以帮助！！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!