Question

我见过@HostListner针对不同元素和事件的示例，我甚至看到有人在用户滚动时进行监听。这些例子看起来像这样

@HostListener('window:scroll', [$event]) scrollFunction(event){/*do stuff*/};

到目前为止，我正在尝试做的事情看起来像这样。

@HostListener('???:???', [$event]) scrollXCheck(event){
    if(window.innerWidth > document.scrollWidth){/*do stuff*/};
}

问题是，我不知道如何找出我应该代替???:???部分的内容。我更多地研究了@HostListener的语法，并没有看到很多关于它的细节，因为你可以调用你想要的任何元素或属性。任何人都可以帮忙吗？

Answer 1

您可以收听onload事件，并执行以下操作：

@HostListener('window:onload', [$event]) hasScrollbar(event){
    if(window.innerWidth > document.documentElement.clientWidth){
        // Do stuff
    };
}

侦听事件的另一种方法是使用Observable.fromEvent方法，这样可以更好地控制subscribing，mapping等事件。像这样的东西：

ngOnInit() {
  Observable.fromEvent(window, 'onload').subscribe((event: any) => {
        if (window.innerWidth > document.documentElement.clientWidth) {
            // Do stuff
        }
    });
}

两者都会产生类似的结果，只是认为我把它作为洞察力。

如何使用@HostListener检测滚动条是否存在

1 个答案: