ElementScrolled事件没有被CdkScrollable和垫子侧导航触发

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>

在我的app-notification组件中，它位于mat 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>

在我的申请通知中。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) => {});
}

然而，无论我在垫子侧导航中滚动多少，这个订阅都不会被调用。文档说，CdkScrollable指令会在主机上发出一个可观察的elemnet滚动。

返回在主机上触发滚动事件时发出的可观察结果要素

另一种选择是监听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>