Angular 7 CDK-virtual-scroll-viewport-虛擬滾動

Question

cdk-virtual-scroll-viewport是否有可用的事件來查找是否呈現了列表中的元素。 例如，在滾動如下所示的列表時，是否有一種方法可以識別是否渲染了特定的li或將一組新元素渲染到了DOM中。

• 項目
• 項目
• 項目

Answer 1

我認為屬性

renderingRangeStream：可觀察〜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));
  }

在這里和這里閱讀更多