滚动加载更多 p-​​tree 节点

Question

我们有需要显示的大量记录，因此我试图在滚动时实现将更多数据附加到 .但是，我无法在我的指令中访问调试器。有人可以帮我在到达底部时触发滚动事件吗？有没有其他方法可以捕获滚动事件以提高页面的性能？

explore.component.html

<div style="overflow: auto !important;height: 488px !important;" scrollTracker  (scrollingFinished)="onScrollingFinished()">
<p-tree [value]="files | filter:searchText" selectionMode="single" [(selection)]="selectedFiles"
(onNodeSelect)="nodeSelect($event)" (onNodeExpand)="expandNode($event)"  ></p-tree>
</div>

explore.component.ts：

@Output() scrollingFinished = new EventEmitter<void>();
 


onScrollingFinished() {
this.scrollingFinished.emit();
}

指令：

import { Directive, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({
selector: '[scrollTracker]'
})
export class ScrollTrackerDirective {
@Output() scrollingFinished = new EventEmitter<void>();

emitted = false;

@HostListener("window:scroll", [])
onScroll(): void {
debugger;
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight && !this.emitted) {
this.emitted = true;
this.scrollingFinished.emit();
} else if ((window.innerHeight + window.scrollY) < document.body.offsetHeight) {
this.emitted = false;
}
}
}

Answer 1

您应该始终监听触发滚动事件的元素上的事件。

在您的情况下，您应该在可滚动 div 上监听滚动事件，该 div 位于模板中，即您使用 scrollTracker 指令的 div。

为此，您应该将window:scroll 替换为目标元素上的滚动事件，在这种情况下，目标元素是可滚动的 div。 在你的 onScroll 方法中

constructor(private element: ElementRef) {}

@HostListener('scroll', ['$event'])
public onScroll(event) {
    let element = this.element.nativeElement;
    if (element.scrollTop + element.clientHeight + 50 > element.scrollHeight) {
        // reached the bottom 
    }
}