ElementScrolled 事件没有被 CdkScrollable 和 mat-side-nav 触发

Question

我有以下 DOM 配置

<div class="sticky-nav-wrapper">
    <app-header (notificationClick)="notificationData=$event; sidenav.toggle()"></app-header>
</div>
<mat-sidenav-container>
    <mat-sidenav-content>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
    <mat-sidenav #sidenav mode="over">
        <app-notifications [notificationData]="notificationData" [opened]="sidenav.opened" (notificationItemClick)="sidenav.close()"></app-notifications>
    </mat-sidenav>
</mat-sidenav-container>

在 mat-sidenav 内的 app-notification 组件中，我想听滚动。以下是我的应用通知模板

<div class="class-notification-container" cdkScrollable>
    <div *ngIf="notifications && notifications.length > 0">
        <div *ngFor="let item of notifications">
            <div class="class-notification" [ngClass]="{'class-notification-new': item.localStatus === 'new','class-notification-old': item.localStatus === 'seen'}" (click)="onNotificationClick(item)">
                <app-avatar [imageId]="item?.fromUser?.id"></app-avatar>
            </div>
            <mat-divider></mat-divider>
        </div>
    </div>
</div>

在我的 app-notification.ts 中：

@ViewChild(CdkScrollable) notificationContainer: CdkScrollable;

和

 ngAfterViewInit(): void {
    this.notificationContainer.elementScrolled()
      .subscribe((scrollPosition) => {
        this.ngZone.run(() => {
          if (!this.endOfNotifications) {
            this.pageNumber = this.pageNumber + 1;
            this.getNotifications();
          }
        });
      }, (error) => {});
  }

但是，无论我在 mat-side-nav 内滚动多少，都不会调用此订阅。文档说 CdkScrollable 指令在主机 elemnet 滚动上发出一个 observable。

返回在主机上触发滚动事件时发出的 observable 元素。

另一种选择是收听scrollDispatcher。然而，问题是 scrolldispatcher 是在窗口滚动上发送事件，而不是专门在侧导航滚动上。

我似乎按照文档做的一切都很好。有人可以建议哪里出了问题。我特别想在侧导航中收听我的组件的滚动，即app-notification 组件。我也不想听窗口滚动或说mat-side-nav-content滚动。

Answer 1

可能是你对父母的要求太高了。

你试过用 *ngFor 监听 div 吗？

<div >
    <div *ngIf="notifications && notifications.length > 0">
        <div class="class-notification-container" cdkScrollable *ngFor="let item of notifications">
            <div class="class-notification" [ngClass]="{'class-notification-new': item.localStatus === 'new','class-notification-old': item.localStatus === 'seen'}" (click)="onNotificationClick(item)">
                <app-avatar [imageId]="item?.fromUser?.id"></app-avatar>
            </div>
            <mat-divider></mat-divider>
        </div>
    </div>
</div>