在ng-完美-scrolbar中从顶部滚动距离。

Question

我想订阅滚动事件的ng完美滚动条跟踪滚动距离。就像这样：

<perfect-scrollbar (onScroll)='distanceFromTop => console.log(distanceFromTop )'>
   <router-outlet></router-outlet>
</perfect-scrollbar>

尝试过的内容:我向滚动条添加了指令，并尝试获取本机元素，并将on涡旋设置为我的函数：

<perfect-scrollbar #mainScrollbar>
   <router-outlet></router-outlet>
</perfect-scrollbar>

@ViewChild('mainScrollbar') private mainScrollbar: 
ElementRef<HTMLElement>;

ngAfterContentInit() {
   console.log(this.mainScrollbar.nativeElement);
   this.mainScrollbar.nativeElement.onscroll = e => console.log(e);
}

我在控制台中得到以下消息：

未定义的TypeError:无法读取未定义的属性“nativeElement”

没有必要使用@ViewChild来回答我的问题，我只需要一个记录滚动距离的工作示例。

Answer 1

对于其他可能对答案感兴趣的人，在深入研究实现之后，我找到了一个解决方案：

1)获取对组件的引用，如演示应用程序中的

@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;

2)从组件引用获取指令引用：

this.componentRef.directiveRef

3)现在您可以调用指令引用的位置：

console.log(this.componentRef.directiveRef.position(true));

4)每次用户滚动使用诸如：(psScrollY)或(psScrollX)之类的带有回调函数的指令时，要获得滚动距离，该函数调用this.componentRef.directiveRef.position(true)