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

Question

cdk-virtual-scroll-viewport是否有可用的事件来查找是否呈现了列表中的元素。 例如，在滚动如下所示的列表时，是否有一种方法可以识别是否渲染了特定的li或将一组新元素渲染到了DOM中。

• 项目
• 项目
• 项目

Answer 1

我认为属性

  

renderedRangeStream：可观察〜ListRange〜=>只要渲染范围发生变化，流就发出。

和

  

@Output（）scrolledIndexChange：可观察的〜数字〜

CdkVirtualScrollViewport 可以帮助您解决此问题，

或

  

@Input（）cdkVirtualForTrackBy：TrackByFunction〜T〜|未定义

在 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