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

Question

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

• 物品
• 物品
• 物品

标签： angularvirtualscroll

Answer 1

我认为属性

renderRangeStream: Observable ~ ListRange ~ => 每当渲染范围改变时发出的流。

和

@Output() scrolledIndexChange: Observable ~ number ~

在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));
  }

在这里和这里阅读更多