2

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

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

4

1 回答 1

5

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

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

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

于 2019-02-28T10:13:45.993 回答