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

Posted 2023-02-18

【中文标题】ElementScrolled 事件没有被 CdkScrollable 和 mat-side-nav 触发

【英文标题】：ElementScrolled Event is not being fired with CdkScrollable and mat-side-nav

【发布时间】：2021-04-10 08:44:31

【问题描述】：

我有以下 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滚动。

【参考方案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>

【讨论】：

你看过这个吗：***.com/questions/47528852/…