Angular маршрутизатор не отправляет параметры запроса, когда мы только меняем порядок

Question

У меня есть большое приложение, использующее серверную часть, и мы можем сделать заказ, используя параметры запроса:

my-resource? Field1 = asc & field2 = des c даст order by field1 asc, field2 desc

, но иногда я инвертирую эти параметры:

my-resource? Field2 = desc & field1 = as c даст 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 я не получил событие в наблюдаемом queryParams, когда я go от 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-адресу со значением, которое увеличивается (или toggle) каждый раз, когда вы вызываете навигацию (конечно, вы должны игнорировать этот параметр в своем бэкэнде).

Например, вы можете добавить текущую временную метку к параметрам запроса, чтобы событие запускалось:

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

Таким образом, происходит обнаружение изменения queryParams и возникает событие.