Как быстро предотвратить переключение маршрутизации Angular?

Question

Я слушаю маршрутизацию:

this.route.paramMap
      .pipe(switchMap((parameters) => of(parameters)))
      .subscribe((params: Params) => {

       if (params.has("id")) {
         // Request to server
       }

       if (params.has("block")) {
         // Just add to array
       }

       if (params.has("request")) {
         // Request to server
       }
});

Когда я быстро переключаю маршрут на туда и обратно, он отправляет множество запросов на сервер в секции if (params.has("id")) {} и if (params.has("request")) {}.

Как чтобы избежать этого и почему .pipe(switchMap((parameters) => of(parameters))) не работает?

Answer 1

это должно быть примерно так:

  this.route.paramMap.pipe(
    switchMap((parameters) => {
      if (params.has("id") {
        return this.serverRequest(params); // return the request, possibly add .pipe() if needed
      } else if (params.has("block")) {
        return of(params); // add to array here and return whatever
      } else if (params.has("request")) {
        return this.serverRequest(params); // return the request, possibly add .pipe() if needed
      }

      return of(params); // whatever default return here
    })
  ).subscribe((result) => {
    //handle your result

  });

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

Вы также можете рассмотреть возможность добавления оператора debounceTime перед вашим switchMap, если вы даже не хотите, чтобы запросы отправлялись если переключение маршрута происходит очень быстро.

Answer 2

Вы можете подписаться на события роутера и писать свои логики c во время начала навигации

import {
  Router,
  // import as RouterEvent to avoid confusion with the DOM Event
  Event as RouterEvent,
  NavigationStart,
  NavigationEnd,
  NavigationCancel,
  NavigationError
} from '@angular/router';

this.router.events.subscribe((event: RouterEvent) => {
    if (event instanceof NavigationStart) {
      // you can write your logic to stop what you want to stop
    }
});