如何在Angular 4中处理窗口滚动事件? [英] How to handle window scroll event in Angular 4?

问题描述

我似乎无法捕获Window滚动事件. 在几个站点上，我发现了与此类似的代码:

I can't seem to be able to capture the Window scroll event. On several sites I found code similar to this:

@HostListener("window:scroll", [])
onWindowScroll() {
  console.log("Scrolling!");
}

这些片段通常来自版本2.在Angular 4.2.2中似乎不再起作用了吗?例如，如果我将"window:scroll"替换为"window:touchmove"，那么touchmove事件就可以很好地处理了.

The snippets often come from version 2. This doesn't seem to work (anymore?) in Angular 4.2.2. If I replace "window:scroll" with "window:touchmove" for example, then then touchmove event is handled fine.

有人知道我想念什么吗?非常感谢你！

Does anyone know what I'm missing? Thank you very much!

推荐答案

您的document可能没有滚动，但其中的div却在滚动.如果从document调用滚动事件，则滚动事件只会冒泡直到window.同样，如果您从document捕获事件并调用stopPropagation之类的东西，您将不会在window中收到该事件.

Probably your document isn't scrolling, but a div inside it is. The scroll event only bubbles up to the window if it's called from document. Also if you capture the event from document and call something like stopPropagation, you will not receive the event in window.

如果要捕获应用程序内的所有滚动事件(它们也将从微小的可滚动容器中捕获)，则必须使用默认的addEventListener方法，并且useCapture设置为true.

If you want to capture all the scroll events inside your application, which will also be from tiny scrollable containers, you have to use the default addEventListener method with useCapture set to true.

这会在事件沿着DOM而不是气泡阶段触发时触发事件.不幸的是，坦率地说，这是一个很大的遗漏，Angular不提供传递事件侦听器选项的选项，因此您必须使用addEventListener:

This will fire the event when it goes down the DOM, instead of the bubble stage. Unfortunately, and quite frankly a big miss, angular does not provide an option to pass in the event listener options, so you have to use the addEventListener:

export class WindowScrollDirective {

    ngOnInit() {
        window.addEventListener('scroll', this.scroll, true); //third parameter
    }

    ngOnDestroy() {
        window.removeEventListener('scroll', this.scroll, true);
    }

    scroll = (event): void => {
      //handle your scroll here
      //notice the 'odd' function assignment to a class field
      //this is used to be able to remove the event listener
    };

}

现在这还不是全部，因为所有主流浏览器(显然，IE和Edge除外)都实现了新的addEventListener规范，该规范使得可以将对象作为

Now this is not all there is to it, because all major browsers (except IE and Edge, obviously) have implemented the new addEventListener spec, which makes it possible to pass an object as third parameter.

使用此对象，您可以将事件侦听器标记为passive.这是对触发大量时间的事件(例如滚动事件)进行的推荐操作，该事件可能会干扰UI性能.要实现此功能，您应该首先检查当前的浏览器是否支持此功能.他们在mozilla.org上发布了方法passiveSupported，您可以使用该方法检查浏览器的支持.但是，当您确定不使用event.preventDefault()

With this object you can mark an event listener as passive. This is a recommend thing to do on an event which fires a lot of time, which can interfere with UI performance, like the scroll event. To implement this, you should first check if the current browser supports this feature. On the mozilla.org they've posted a method passiveSupported, with which you can check for browser support. You can only use this though, when you are sure you are not going to use event.preventDefault()

在向您展示如何执行此操作之前，您可能会想到另一个性能功能.为了防止运行更改检测(每次在区域中发生任何异步事件时都会调用DoCheck.就像事件触发一样)，您应该在区域外运行事件侦听器，并且仅在确实需要时才输入它.好吧，让我们结合所有这些东西:

Before I show you how to do that, there is another performance feature you could think of. To prevent change detection from running (the DoCheck gets called every time something async happens within the zone. Like an event firing), you should run your event listener outside the zone, and only enter it when it's really necessary. Soo, let's combine all these things:

export class WindowScrollDirective {

    private eventOptions: boolean|{capture?: boolean, passive?: boolean};

    constructor(private ngZone: NgZone) {}

    ngOnInit() {            
        if (passiveSupported()) { //use the implementation on mozilla
            this.eventOptions = {
                capture: true,
                passive: true
            };
        } else {
            this.eventOptions = true;
        }
        this.ngZone.runOutsideAngular(() => {
            window.addEventListener('scroll', this.scroll, <any>this.eventOptions);
        });
    }

    ngOnDestroy() {
        window.removeEventListener('scroll', this.scroll, <any>this.eventOptions);
        //unfortunately the compiler doesn't know yet about this object, so cast to any
    }

    scroll = (): void => {
        if (somethingMajorHasHappenedTimeToTellAngular) {
           this.ngZone.run(() => {
               this.tellAngular();
           });
        }
    };   
}

这篇关于如何在Angular 4中处理窗口滚动事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！