Как получить запуск при прокрутке внутри cdk-virtual-scroll-viewport? - PullRequest
Новая
       34

Как получить запуск при прокрутке внутри cdk-virtual-scroll-viewport?

0 голосов
/ 28 февраля 2019

Я использую виртуальную прокрутку с 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 ... но я должен передать ему CdkScrollableвместо этого у меня есть CdkVirtualScrollViewport элемент.

Тогда, как я могу прослушивать только события прокрутки моего окна виртуальной прокрутки?

1 Ответ

0 голосов
/ 28 февраля 2019

Для прослушивания событий прокрутки в пределах CdkVirtualScrollViewport используется метод elementScrolled(): 

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

Таким образом, нет необходимости вводить scrollDispatcher и регистрировать любой элемент ...

...