Angular虚拟滚动重置到顶部。

Question

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

这是我的组件模板：

<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 方法后，项目数组已正确更新，并且视图反映了这种变化。但是，滚动条不会回到顶部。

我希望每次更改 items 数组时，虚拟滚动可以将滚动重置为顶部。

- Francesco Borzi

Answer 1

我通过在组件内部注入一个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);就能解决问题。

- Francesco Borzi

---

如果我们正在使用多个cdkvirtualscroll，那么如何重置scrollToIndex(0)呢？请参考以下示例：https://stackblitz.com/edit/angular-7vcohv?file=src%2Fapp%2Fapp.component.html - Vignesh