在 url 中添加/更改可选参数（矩阵表示法）而无需导航答案

【问题标题】：Add/change optional parameters (matrix notation) in url without navigating在 url 中添加/更改可选参数（矩阵表示法）而无需导航
【发布时间】：2017-01-12 07:28:18
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： angular angular2-routing

【解决方案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 了解更多信息。

【讨论】：

这就是我已经这样做的方式，我只是认为每次都会重新加载组件。感谢您的澄清。
@AArias 如果你将console.log('New construction') 放在构造函数中，或者放在ngOnInit 的顶部，你应该注意到即使你导航到同一条路线，它也只会被调用一次。 RC 5 中有一个错误阻止了惰性路由的这种行为，但它应该已在 RC 6 中修复 (github.com/angular/angular/issues/10841)
使用Number(params['page']) 转换为数字对于阅读代码的人来说会更清楚。