如何快速防止切换路由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, 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 不会取消最终订阅中发生的事情，它会取消内部可观察对象中发生的事情，因此内部可观察对象需要是您要取消的内容。一般来说，嵌套订阅是不好的做法，意味着你做错了什么。

如果路由切换发生得非常快，甚至不希望发送请求，您还可以考虑在 switchMap 之前添加一个 debounceTime 运算符。

如何快速防止切换路由Angular？

How to fast prevent switching routing Angular?

angular

angular6

angular8