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

【问题标题】：How to get triggered on scrolling inside cdk-virtual-scroll-viewport?如何在 cdk-virtual-scroll-viewport 内滚动时触发？
【发布时间】：2019-02-28 09:29:16
【问题描述】：

我在 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 元素。

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

【问题讨论】：

标签： angular events scroll virtualscroll

【解决方案1】：

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

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

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

【讨论】：