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

Question

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

我试图在我的组件中注入(inject) scrollDispatcher，但我看到 scrolled() 在整个组件上滚动时被触发，然后我发现它是绑定(bind)的到组件，而不仅仅是 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 元素。

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

Answer 1

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

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

所以不需要注入(inject)scrollDispatcher并注册任何元素...