在滚动时加载更多 p 树节点 angular

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 指令的地方。

为此，您应该将 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 
    }
}

在滚动时加载更多 p 树节点 angular

on scroll load more p-tree nodes angular

angular

typescript

primeng