У меня следующая конфигурация 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>
В моем 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) => {});
}
Однако эта подписка никогда не активируется, сколько бы я ни прокручивала внутри панели навигации. В документации говорится, что директива CdkScrollable испускает наблюдаемый на узле elemnet scroll.
Возвращает наблюдаемое, которое испускается, когда событие прокрутки запускается в элементе хоста.
Другой вариант - послушать scrollDispatcher. Однако проблема в том, что scrolldispatcher отправляет события при прокрутке окна, а не конкретно при прокрутке боковой навигации.
Кажется, я все делаю нормально, как указано в документе. Может кто-нибудь подсказать, где что-то идет не так. Я специально хочу слушать прокрутку моего компонента в боковой панели навигации, то есть компонента app-notification. Также я не хочу слушать прокрутку окна или произносить прокрутку mat-side-nav-content.
