如何设置Angular8轮事件的灵敏度？

Question

通过线程，我能够设置我的应用程序，以便它在滚动时导航。我只有一个问题，在任何地方都找不到相关信息！如何设置滚动事件的"sensitivity"？我的问题是，通常即使是最轻微的 scroll，它也会导航多条路线，而不是只给我下一条路线。正如您在随附的 GIFF 中看到的那样，这是我的触控板非常轻微的移动，而且从“关于游览”到“画廊”再到所有其他导航点的速度太快了！有没有办法调节速度，延迟，灵敏度什么的？

事件监听器被放置在所有components如下！这是来自我的 tours.component.ts

  @HostListener('wheel', ['$event'])
  onWheelScroll(evento: WheelEvent) {
    // Scroll down go to gallery
    if (evento.deltaY > 0) {
      this.router.navigate(['gallery'])
      // Scroll up go to about
    } else {
      this.router.navigate(['about'])
    }

Answer 1

由于您是在滚动上导航，这意味着在 app.component.ts 或任何其他更高级别的组件中您启用了侦听器。

你可以放这样的东西

...
// we'll use this to ignore scrolling event
navigating = false;

constructor(
  ...
  private readonly router: Router
) {
  this.router.events.subscribe(e => {
    if (e instanceof NavigationStart) {
      this.navigating = true;
    } else if (e instanceof NavigationEnd) {
      this.navigating = false;
    }
  });
}

然后在你的处理程序中，如果它是一个简单的回调函数

if (this.navigating) {
  return;
}

或者 filter 如果你使用的是 RxJs' fromEvent

source$.pipe(filter(e => !this.navigating))

这是一个example

Answer 2

应该尝试限制或消除滚动事件。有 n 种方法可以为滚动事件实现去抖动。

i) 使用原始 javascript 方法，https://davidwalsh.name/javascript-debounce-function

ii) 使用 RxJs 运算符，https://www.codementor.io/abolaji_dev/throttling-and-debounce-with-rxjs-observable-cjcgdii1d

iii) 使用Angular方式，

理想情况下，这会通过延迟导航来延迟滚动事件的发生。

如何设置Angular8轮事件的灵敏度？

How to set the sensitivity of Angular 8 wheel event?

scroll

mousewheel

angular

angular8