Как я могу обнаружить изменения в queryParams и фрагменте одновременно (или, по крайней мере, в четко определенном порядке)?

Question

Я пишу WidgetList, который имеет параметры запроса (включая данные подкачки), которые он считывает / записывает в / из параметров запроса URL. Но у него также есть выборка, которую он записывает / читает в / из фрагмента URL.

Для этого у меня есть подписчики на queryParams и fragment:

this.route.queryParamMap.subscribe((queryParamMap) => { handleQueryChange }
this.route.fragment.subscribe((queryParamMap) => { handleFragmentChange }

Однако некоторые операции с этим компонентом вызовут одновременное изменение нумерации страниц и выбора (т. Е. И queryParams, и fragment необходимо изменить в одном вызове router.navigate). Это доказывает проблемы c с вышеуказанной моделью подписчика.

Лог c в handleQueryChange и handleFragmentChange изменяется в зависимости от того, изменились и фрагмент и queryParams или только один из них. Тем не менее, эти подписчики полностью независимы друг от друга c, поэтому не совсем понятно, как это сделать.

В идеале я мог бы просто подписаться на полные изменения URL-адреса примерно так:

this.route.url.subscribe((change) => {
    if (change.fragmentChanged() && change.queryParamChanged()) {
      ...
    } else if (change.fragmentChanged()) {
      ...
    } else if (change.queryParamChanged()) {
      ...
    }
}

В AngularJS я бы просто посмотрел на изменения в полном URL и распаковал их в queryParams и фрагмент вручную, но я не могу найти способ сделать это здесь.

Если бы я увидел в документах гарантию того, что один из подписчиков queryParams / fragment всегда будет выполняться раньше другого, я бы заставил его работать.

Есть какие-нибудь решения?

Answer 1

Может быть, просто попробуйте объединить фрагмент и параметры с rx js. Как то так:

queryParams$ = this.route.queryParamMap;
fragment$ = this.route.fragment;
combineLatest(this.fragment$, this.queryParams$).pipe(
  tap(([fragment,params]) => console.log('do something with:', fragment, params)),
).subscribe();

Answer 2

Для изменения URL полного маршрута есть много вещей, которые нужно искать. Номер порта, имя домена, контекстный путь, параметры запроса, данные и т. Д. c.

Таким образом, для изменения маршрута или при маршрутизации на странице это событие может быть записано с использованием следующего кода

      this.router.events.pipe(
        filter((event) => event instanceof NavigationEnd),
      )
        .subscribe(() => {
          handle Navigation Changes here 
        });

Это событие будет запущено после завершения навигации, т.е. NavigationEnd. Есть много событий маршрутизатора, таких как Navigation Start, et c. Вы можете проверить это, зарегистрировав событие в консоли.