Angular 当我们只改变顺序时，路由器不发出查询参数

Question

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

my-resource?field1=asc&field2=desc will gives order by field1 asc, field2 desc

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

my-resource?field2=desc&field1=asc will gives 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 });
}

我还有另一个组件可以监听 queryParams 的变化：

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 时，当我从 field1=asc&field2=desc 导航到 field1=desc&field2=asc 时，我没有在 queryParams observable 中收到事件它有效，但如果我们尝试颠倒参数的顺序，它不会发出任何可观察到的值。

Answer 1

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

作为（肮脏的）解决方法，您可以向 url 添加一个查询参数，每次调用导航时该参数都会增加（或切换）（当然您必须在您的后端）。

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

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

这样，queryParams 更改检测发生并触发事件。

Answer 2

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

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

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

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

这不是经过测试的代码，只是为了让大家理解这个想法

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

Angular 当我们只改变顺序时，路由器不发出查询参数

Angular router is not emitting query params when we only change the order

typescript

angular-routing

angular