如何使用HostListener（Angular 7）从页面上的元素捕获任何滚动事件？

我正在Angular 7中制作一个可重复使用的面包屑条组件。我想它隐藏一旦页面已经被滚动了一点，然后重新出现时，用户滚动回来

我做了一个附加到引用offsetParent的条本身的指令，以捕获实际滚动的容器的scrollTop。所有这些代码都可以运行，但我不确定如何触发HostListener来实际运行代码

我将在这个问题的前面说明一个事实，我真的不想在每个滚动的容器上附加一个指令，因为这会降低组件的灵活性。如何捕获页面上的任何滚动事件？下面的代码片段是HTML模板和指令。我也不想使用一堆鼠标事件。当然，必须有某种方法来捕获滚动事件，或者至少让它们冒泡到文档级别

提前谢谢

import{Directive，HostListener，Output，EventEmitter，ElementRef，Inject}来自“@angular/core”；
@指示({
选择器：“[scrollListener]”
})
导出类ScrollListenerDirective{
previousScrollContainerScrollTop=0；
@Output（）scroll=neweventemitter（）；
构造函数（私有el:ElementRef）{}
@HostListener（'文档：滚动'，['$event']））
onListenerTriggered（）：void{
让currentScrollTop：数字；
让元素高度：数字；
const scrollContainerScrollTop=this.el.nativeElement.offsetParent.scrollTop；
element高度=this.el.nativeElement.offsetHeight；
currentScrollTop=scrollContainerScrollTop；
if（this.previousScrollContainerScrollTopelementHeight+elementHeight）{
this.scroll.emit（true）；
}else if（this.previousScrollContainerScrollTop>currentScrollTop&！（scrollContainerScrollTop
返回
{{crump.label}

我找到了答案。我最终使用了一个纯Javascript事件监听器，它使用事件发射器启动我的函数。效果很好

import{Directive，HostListener，Output，EventEmitter，ElementRef，Inject}来自“@angular/core”；
@指示({
选择器：“[ScrollListener]”
})
导出类ScrollListenerDirective{
previousScrollContainerScrollTop=0；
@Output（）scroll=neweventemitter（）；
构造函数（专用el:ElementRef）{
document.addEventListener（'滚动'，（事件）=>{
此.onListenerTriggered（事件）；
}，true）；//这样我们就可以使用UseCapture事件侦听器。文档滚动不会冒泡回到文档级别
}
onListenerTriggered（事件）：无效{
让currentScrollTop：数字；
让元素高度：数字；
const scrollContainerScrollTop=this.el.nativeElement.offsetParent.scrollTop；
element高度=this.el.nativeElement.offsetHeight；
currentScrollTop=scrollContainerScrollTop；
if（this.previousScrollContainerScrollTopelementHeight+elementHeight）{
this.scroll.emit（true）；
}否则如果（this.previousScrollContainerScrollTop>currentScrollTop&&！（scrollContainerScrollTop希望这篇文章有助于我隐藏面包屑条的代码起作用。我正在试图找到一种方法来触发HostListener，而无需将指令附加到每个滚动的容器上。我可以使用UseCapture和纯JavaScript事件侦听器来实现这一点，但我不能在指令中使用输出发射器。