如何在 cdk-virtual-scroll-viewport 內滾動時觸發？

Question

我在 Angular 7 中使用虛擬滾動。我創建了一個CdkVirtualScrollViewport ，我會為每個滾動事件添加一個監聽器。 我的意思是我希望在該視口內滾動時收到通知。

我試圖在我的組件中注入scrollDispatcher ，但我看到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監聽滾動事件的CdkVirtualScrollViewport是使用elementScrolled()方法：

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

所以不需要注入scrollDispatcher並注冊任何元素......