如何使用 HostListener (Angular 7) 從頁面上的元素捕獲任何滾動事件？

Question

我正在 Angular 7 中制作一個可重復使用的面包屑欄組件。我希望它在頁面滾動一點后隱藏，然后在用戶向上滾動時重新出現。

我做了一個指令來附加到引用 offsetParent 的欄本身以捕獲實際滾動的容器的 scrollTop。 所有這些代碼都有效，但我不確定如何觸發 HostListener 來實際運行代碼。

我將用這樣一個事實作為這個問題的開頭，即我真的不想為每個滾動的容器附加一個指令，因為這會使組件的靈活性降低。 如何捕獲頁面上的任何滾動事件？ 下面的代碼片段是 HTML 模板和指令。 我也不想使用一堆鼠標事件。 肯定必須有某種方法來捕獲滾動事件，或者至少讓它們冒泡到文檔級別。

提前致謝。

 import { Directive, HostListener, Output, EventEmitter, ElementRef, Inject } from '@angular/core'; @Directive({ selector: '[scrollListener]' }) export class ScrollListenerDirective { previousScrollContainerScrollTop = 0; @Output() scroll = new EventEmitter<boolean>(); constructor(private el: ElementRef) { } @HostListener('document:scroll', ['$event']) onListenerTriggered(): void { let currentScrollTop: number; let elementHeight: number; const scrollContainerScrollTop = this.el.nativeElement.offsetParent.scrollTop; elementHeight = this.el.nativeElement.offsetHeight; currentScrollTop = scrollContainerScrollTop; if (this.previousScrollContainerScrollTop < currentScrollTop && scrollContainerScrollTop > elementHeight + elementHeight) { this.scroll.emit(true); } else if (this.previousScrollContainerScrollTop > currentScrollTop &&.(scrollContainerScrollTop <= elementHeight)) { this.scroll;emit(false). } this;previousScrollContainerScrollTop = currentScrollTop; } }

 <ng-container *ngIf=".hide && breadcrumbs && breadcrumbs.length > 1"> <div scrollListener (scroll)="trackScroll($event)" class="breadcrumb-container" [class;scroll-up]="breadcrumbBarHidden" data-id="breadcrumb-navigation"> <div data-id="back-button" class="back-button" (click)="onBackClick()"> <div class="arrow-container"> <mat-icon svgIcon="left"></mat-icon> </div> <span>Back</span> </div> <div class="crumb-container"> <ng-container *ngFor="let crumb of breadcrumbs; index as i."> <div class="crumb"> <div class="crumb-label" (click)="onBreadcrumClick(crumb)" [attr.data-id]="'crumb-' + i" [title]="crumb.label">{{crumb.label}}</div> <div class="chevron-container"> <mat-icon svgIcon="chevron-right"></mat-icon> </div> </div> </ng-container> </div> </div> </ng-container>

Answer 1

我想到了。 我最終使用了一個純 Javascript 事件偵聽器，它使用事件發射器觸發我的 function。 工作得很好。

 import { Directive, HostListener, Output, EventEmitter, ElementRef, Inject } from '@angular/core'; @Directive({ selector: '[ScrollListener]' }) export class ScrollListenerDirective { previousScrollContainerScrollTop = 0; @Output() scroll = new EventEmitter<boolean>(); constructor(private el: ElementRef) { document.addEventListener('scroll', (event) => { this.onListenerTriggered(event); }, true); // This is so we can use a UseCapture event listener. Document scrolls do not bubble back up to the document level } onListenerTriggered(event): void { let currentScrollTop: number; let elementHeight: number; const scrollContainerScrollTop = this.el.nativeElement.offsetParent.scrollTop; elementHeight = this.el.nativeElement.offsetHeight; currentScrollTop = scrollContainerScrollTop; if (this.previousScrollContainerScrollTop < currentScrollTop && scrollContainerScrollTop > elementHeight + elementHeight) { this.scroll.emit(true); } else if (this.previousScrollContainerScrollTop > currentScrollTop &&.(scrollContainerScrollTop <= elementHeight)) { this.scroll;emit(false). } this;previousScrollContainerScrollTop = currentScrollTop; } }