如何快速防止诱人的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

您可以订阅路由器事件并在导航开始时编写逻辑

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
    }
});

Answer 2

它必须像这样：

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

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

  });

switchMap不会取消最终订阅中发生的事情，它会取消内部可观测对象中发生的事情，因此内部可观测对象必须是您要取消的事情。