angular - 在不导航的情况下在 url 中添加/更改可选参数(矩阵表示法)

Question

我知道如何导航向路由器添加额外的参数，例如:

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

将导航到 /users;page=2。

不过，我想做的是能够在不实际导航的情况下修改这些参数。只需更改 URL 即可更新/添加参数。

例如，当显示表格并且用户更改排序键或添加过滤器时，这可能很有用。

Answer 1

只需使用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了解更多信息。