Angular 虚拟滚动重置为顶部

Question

在我的Angular应用程序，我正在使用 Virtual Scroll来自 Angular cdk。

这是我的组件的模板:

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

在我的组件类中，我有一个方法可以更改数组 items 并赋予它新的内容。每次调用此方法时，数组的大小都会发生变化:

reload(newItems) {
  this.items = newItems;
}

在调用方法reload 之后，项目数组被正确更新并且 View 反射(reflect)了这一变化。但是，滚动不会回到顶部。

每次更改 items 数组时，我都想让虚拟滚动重置顶部的滚动。

Answer 1

我通过在我的组件中注入(inject) CdkVirtualScrollViewport 解决了这个问题:

import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

// ...
export class MyComponent {
  @ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;

  // ...

  reload(newItems) {
    this.items = newItems;
    this.virtualScroll.scrollToIndex(0);
  }
}

调用 this.virtualScroll.scrollToIndex(0); 成功了。