我有以下 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>
在app-notificationmat-sidenav 内部的组件中，我想听滚动。以下是我的应用通知模板
<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。然而，问题是滚动调度程序在窗口滚动上发送事件，而不是专门在侧导航滚动上发送事件。
我似乎按照文档做的一切都很好。有人可以建议哪里出了问题。我特别想听听我的组件在侧导航组件中的滚动app-notification。我也不想听窗口滚动或说mat-side-nav-content滚动。