角度虚拟滚动重置到顶部

时间:2019-05-13 20:16:06

标签: angular typescript angular-cdk virtualscroll angular-cdk-virtual-scroll

在我的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>

在Component的类中,我有一个方法可以更改数组items为其赋予新的内容。每次调用此方法时,数组的大小都会改变:

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

调用方法reload之后,将正确更新项目数组,并且视图将反映此更改。但是,滚动条不会回到顶部。

每次更改items数组时,我希望通过虚拟滚动将顶部的滚动重置。

1 个答案:

答案 0 :(得分:0)

我通过在组件中注入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);可以解决问题。