Angular 检测窗口在角度方向上滚动经过div的时间

我正在努力用Firestore和Angular 11.2.10实现无限滚动。第一步是尝试检测用户何时到达我的项目列表的末尾，以便我可以再加载x个项目。这将一直持续到我的查询不再返回任何结果为止

我在一个div

#main content

下面有一堆

垫子卡

<div id="main-content">
  <mat-card class="city-card" *ngFor="let city of cities | async">
    ...
  </mat-card>
</div>

但是，如果我尝试使用：

@HostListener('window:scroll') onScroll(e: Event): void {
  console.log(this.getYPosition(e));
}

getYPosition(e: Event): number {
  return (e.target as Element).scrollTop;
}

我将收到错误消息：错误类型错误：无法读取未定义的属性“target”

另一方面，将该代码作为指令的一部分而不是直接放在组件的.ts文件中有什么好处？
要将事件对象传递到滚动处理程序中，需要将第二个参数
['$Event']
传递到：

@HostListener（'window:scroll'，['$event']）onScroll（e:event）：void{
console.log（this.getYPosition（e））；
}

第二个参数是（来自文档），
事件发生时传递给处理程序方法的一组参数。

@HostListener('window:scroll') onScroll(e: Event): void {
  console.log(this.getYPosition(e));
}

getYPosition(e: Event): number {
  return (e.target as Element).scrollTop;
}