Angular 7 cdk-virtual-scroll-viewport - 虚拟滚动

Question

是否有任何可用的事件，cdk-virtual-scroll-viewport 用于查找列表中的元素是否呈现。例如，当滚动浏览下面的列表时，是否有一种方法可以识别特定的 li 是否被渲染或一组新元素被渲染到 DOM 中。

• 项目
• 项目
• 项目

Answer 1

我认为的属性

renderedRangeStream: Observable ~ ListRange ~ => A stream that emits whenever the rendered range changes.

和

@Output() scrolledIndexChange: Observable ~ number ~

CdkVirtualScrollViewport 可以帮助你，

或

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

关于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));
  }

阅读更多 here和 here