如何在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

也许我可以使用scrollDispatcher的register()方法……但是我应该向它传递一个CdkScrollable，而我的元素是一个CdkVirtualScrollViewport元素。

那么，我如何才能只收听我的虚拟滚动视区滚动事件？

Answer 1

在CdkVirtualScrollViewport中监听滚动事件的方式是使用elementScrolled()方法：

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

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