Angular 4 @HostListener Window 滚动事件奇怪地在 Firefox 中不起作用

Question

我在 Angular 4 应用程序中使用 @HostListener('window:scroll', []) 以便在滚动时向标题添加额外的类。它在 Chrome 中运行良好，但我注意到在 Firefox 54.0(我认为它是最新版本)中没有添加该类，它根本不执行 onWindowScroll() 方法。可能是什么原因？

这是代码的一部分和 Plunker Demo (顺便说一下，它在 Chrome 中也能正常工作，但在 Mozilla 中却不行):

public isScrolled = false;
constructor(@Inject(DOCUMENT) private document: any) {}
@HostListener('window:scroll', [])
onWindowScroll() {
    const number = this.document.body.scrollTop;
    if (number > 150) {
        this.isScrolled = true;
    } else if (this.isScrolled && number < 10) {
        this.isScrolled = false;
    }
}

任何帮助将不胜感激。

Answer 1

试试这个:

@HostListener('window:scroll', ['$event'])
onWindowScroll($event) {
    console.log("scrolling...");
}

我更喜欢这个:

import { fromEvent } from "rxjs";

...

this.eventSubscription = fromEvent(window, "scroll").subscribe(e => {
    this.onWindowScroll();
});