当我们只更改顺序时，角度路由器不会发出查询参数

Question

我有一个使用后端的大型应用程序，我们可以使用查询参数进行排序：

my-resource？field1=asc&field2=desc will 给出order by field1 asc, field2 desc

但有时，我会反转这些参数：

my-resource？field2=desc&field1=asc will 给出order by field2 desc, field1 asc

所以在我的代码中，我有一个组件，它使用 url 树发出新的查询参数，navigateByUrl：

url = 'my-resource';
navigateTo() {
this.navigateByUrl(this.getUrlTree())
}
getUrlTree() {
this.router.createUrlTree([this.url], { queryParams: this.orderedQueryParams });
}

我有其他组件可以侦听查询参数更改：

constructor(private _route: ActivatedRoute) {}
ngOnInit() {
this._route.queryParams
.takeUntil(this._destroyed$)
.do(async params => {
console.log('params', params);
this.doRequestToResource(params);
}).subscribe();
}

问题是，当我从?field1=asc&field2=desc导航到?field2=desc&field1=asc时，我没有在 queryParams observable 中收到事件，当我从field1=asc&field2=desc转到field1=desc&field2=asc时它可以工作，但如果我们尝试反转参数的顺序，它不会发出任何可观察值。

Answer 1

由于顺序对您很重要，因此查询参数可能需要另一种方法。

一个想法是只使用一个像这样的查询参数

example.is/?q=field1;desc,field2;asc

然后在您的代码中，您只需进行一些拆分即可获取参数。

这不是经过测试的代码，只是为了传达想法

const splitted = params.split(',') // results = ['field1;desc', 'field2;asc']
const more_split = splitted.map(_ => _.split(';')) 

Answer 2

我猜 Angular 正在考虑这是相同的 url，并且不会触发事件。

作为一种(肮脏的(解决方法，您可以将查询参数添加到您的 url 中，该值在您每次调用导航时都会增加(或切换((当然，您必须忽略后端中的此参数(。

例如，您可以将当前时间戳添加到查询参数中以强制触发事件：

this.router.navigateByUrl(path + '&t=' + new Date().getTime());

这样，查询参数更改检测就会发生，事件就会触发。