如何以编程方式滚动到具有 angular 的 material 虚拟滚动条的项目？

Question

我有一个包含很多项目的列表，每个项目都可以 selected。为此，我使用 Angular Material Virtual Scroll。当一个项目被 selected 时，selected 项目被突出显示，然后被保存在服务器上。当我刷新页面时，selected 项目来自服务器并再次突出显示。

我的代码看起来像

<cdk-virtual-scroll-viewport itemSize="40" class="wrapper">
  <div *cdkVirtualFor="let item of list"
       [class.selected]="item.id === selectedItem.id">
  </div>
</cdk-virtual-scroll-viewport>

问题是，如果 select 一个项目在列表的下方，它会突出显示，但我必须向下滚动到列表才能看到它。当该项目来自服务器时，我想以编程方式向下滚动到它。

我 docs 有一个 scrollToIndex 方法。我在哪里可以找到 FixedSizeVirtualScrollStrategy 的实例，所以我可以调用这个方法？

Answer 1

当然，您需要获取对 CdkVirtualScrollViewport 实例的引用。

@ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;

scrollToMiddle(){
  this.viewPort.scrollToIndex(list.length/2, "smooth");
}

可以找到示例in this stackblitz

对于滚动到列表中所选元素的索引的需求，您可以执行以下操作：

ngAfterViewInit(){
  const selectedIndex = this.list.findIndex(elem => elem.id === this.selectedItem.id);
   if(selectedIndex > -1){
     this.viewPort.scrollToIndex(selectedIndex);
   }
}

注意：这假定列表已在 ngAfterViewInit 生命挂钩期间加载。由于您没有提供有关如何设置列表值的更多信息，这是我能提供的最好的信息。

如何以编程方式滚动到具有 angular 的 material 虚拟滚动条的项目？

How to programmatically scroll to item with angular's material virtual scroll?

angular

angular-material

angular-cdk

virtualscroll

angular-cdk-virtual-scroll