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

Question

В моем приложении Angular я использую виртуальный свиток от 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, массив элементов корректно обновляется, и представление отражает это изменение. Тем не менее, свиток не возвращается наверх.

Я хотел бы иметь виртуальную прокрутку для сброса прокрутки сверху каждый раз, когда 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); сделал свое дело.