Angular 7 cdk-virtual-scroll-viewport - виртуальная прокрутка

Question

Есть ли какое-либо событие, доступное с cdk-virtual-scroll-viewport, чтобы найти элемент в списке, отображается или нет.например, при прокрутке списка, подобного приведенному ниже, есть ли способ идентифицировать определенный ли или нет, или набор новых элементов отображается в DOM.

• элемент
• элемент
• элемент

Answer 1

Я думаю, что свойства

renderedRangeStream: Observable ~ ListRange ~ => Поток, который генерируется при изменении отображаемого диапазона.

и

@ Output () scrolledIndexChange: наблюдаемое ~ число ~

в CdkVirtualScrollViewport может помочь вам в этом,

или

@ Input () cdkVirtualForTrackBy: TrackByFunction ~ T ~ |undefined

on CdkVirtualForOf

, который можно использовать следующим образом:

в классе

  ....
  @ViewChild(CdkVirtualForOf) vrlist: CdkVirtualForOf<any>;
  @ViewChild(CdkVirtualScrollViewport) vsv: CdkVirtualScrollViewport;

  ngAfterViewInit(): void {
    this.vrlist.cdkVirtualForTrackBy = function(a) {
       console.log(a);
    };

    this.vsv.scrolledIndexChange.subscribe((n: number) => 
            console.log(n));
    this.vsv.renderedRangeStream.subscribe((ls: ListRange) => 
            console.log(ls.end, ls.start));
  }

читать дальше здесь и здесь