Угловая виртуальная прокрутка сброшена наверх

Question

В моем приложении Angular я использую Виртуальный свиток с компакт-диска Angular.

Это шаблон моего компонента:

<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.

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); сделал свое дело.