Question

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

我试图在组件中注入scrollDispatcher，但是我看到scrolled()是在滚动整个组件时触发的，然后我发现它绑定到了组件而不是仅仅绑定到{ {1}}。

这是我的代码：

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

完整代码如下：https://stackblitz.com/edit/angular7-scroll-dispatcher

也许我可以使用<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>的{{1}}方法，但是我应该向其中传递一个register()，而我的是一个scrollDispatcher元素。

然后，如何只听我的虚拟滚动视口滚动事件？

Answer 1

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

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

因此，无需注入scrollDispatcher并注册任何元素...

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

1 个答案: