angular – 在URL中添加/更改可选参数(矩阵表示法)而不导航

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

导读：我知道如何导航添加其他参数到路由器,例如： this._router.navigate(['/users',{ page: 2 }]); 将导致导航到/ users; page = 2. 但我想做的是能够修改这些参数而无需实际导航.只需更改URL即可更新/添加参数. 这可能很有用,例如在显示表格时,用户更改排序键或

我知道如何导航添加其他参数到路由器,例如：

this._router.navigate(['/users',{ page: 2 }]);

将导致导航到/ users; page = 2.

但我想做的是能够修改这些参数而无需实际导航.只需更改URL即可更新/添加参数.

这可能很有用,例如在显示表格时,用户更改排序键或添加过滤器.

解决方法

只需使用router.navigate()方法.路由器将识别您要求导航到同一组件,因此它将更改参数而不实际导航.

要获得新参数的通知并更新UI,您可以订阅ActivatedRoute.params Observable：

import {ActivatedRoute} from '@angular/router';
...
constructor(private route:ActivatedRoute){}

ngOnInit() {
  this.sub = this.route.params.subscribe(params => {
     let page = +params['page']; // (+) converts string 'id' to a number
     let sort = params['sort'] || 'ASC'; //use ASC order if none is supplied
     this.updateUI(page,sort);//function would update component as you wish
   });
}

搜索params.subscribe on this page获取更多信息.

（编辑：李大同）

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