如何在 Angular 中检测 mat-list 中的滚动事件

Question

我有一个像这样定义的 mat-list 元素：

<mat-list #wholeList class="syslog__list">
    <ng-container *ngFor="let entry of filteredLogs; let i = index">
      <mat-list-item>
      .
      .
      .

因此，如果需要，我可以在我的 .ts 文件中访问它：

@ViewChild('wholeList') wholeList: any;

如何检测用户何时滚动列表？

Answer 1

您可以在

(scroll)="onScroll($event)"

上使用

mat-list

来处理滚动事件。

<mat-list #wholeList class="syslog__list" (scroll)="onScroll($event)">
 <ng-container *ngFor="let entry of filteredLogs; let i = index">
   <mat-list-item>
   .
   .
   .

通过在 mat-nav 列表上使用 (scroll)="onScroll($event)" ，每次用户滚动经过此

mat-list

时，都会调用

onScroll

方法，该方法允许处理事件滚动并执行所有操作Angular 组件中所需的操作。

工作 Stackblitz