如何在 cdk-virtual-scroll-viewport 内滚动时触发？

Question

我在 Angular 7 中使用虚拟滚动。我创建了一个CdkVirtualScrollViewport监听器，并为每个滚动事件添加一个监听器。我的意思是我希望在该视口内滚动时收到通知。

我尝试注入scrollDispatcher我的组件，但我看到它scrolled()是在整个组件上滚动时触发的，然后我发现它绑定到组件而不是仅绑定到CdkVirtualScrollViewport.

这是我的代码：

@ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;

items: Array<any>;

constructor(private scrollDispatcher: ScrollDispatcher, private cd: ChangeDetectorRef) {
this.items = [];
}

ngOnInit(): void {
  for (let i = 0; i < 100; i++) {
    this.items.push(i);
  }
}

ngAfterViewInit(): void {
this.scrollDispatcher.scrolled()
  .subscribe(event => {
    console.log('scrolled');
  });
}

正如您所看到的，CdkVirtualScrollViewport这是我的组件内的一个子元素：

<div class="header">
  {{header}}
</div>

<div class="container">
  <cdk-virtual-scroll-viewport itemSize="4" class='example-viewport'>
    <li *cdkVirtualFor="let item of items" class='example-item' >{{item}}</li>
  </cdk-virtual-scroll-viewport>
</div>

<div class="footer">
  {{footer}}
</div>

这是完整的代码：https://stackblitz.com/edit/angular7-scroll-dispatcher

也许我可以使用...register()的方法scrollDispatcher，但我应该将 a 传递CdkScrollable给它，而不是我的CdkVirtualScrollViewport元素。

那么，我怎样才能只监听我的虚拟滚动视口滚动事件呢？

Answer 1

监听滚动事件的方法CdkVirtualScrollViewport是使用以下elementScrolled()方法：

this.virtualScroll.elementScrolled()
  .subscribe(event => {
    console.log('scrolled');
  });

所以不需要注入scrollDispatcher和注册任何元素......