Как установить начальный индекс (положение) для CdkVirtualScrollViewport в Angular 7

Question

Мне нужна начальная позиция cdk-virtual-scroll-viewport быть отличным от первого элемента / элемента списка.

Теперь я нашел scrollToIndex а также scrollTo методы, но я могу только заставить их работать при использовании его в ngAfterViewChecked, который чувствует себя прочь

1. Может ли кто-то подтвердить, что использование этих методов в ngAfterViewChecked это правильный способ делать вещи?
2. Если нет, показать альтернативный метод / технику?

  @ViewChild(CdkVirtualScrollViewport) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
  numbers: number[] = [];

  constructor() {
    for (let index = 0; index < 10000; index++) {
      this.numbers.push(index);
    }
  }

  ngAfterViewChecked() {
    this.cdkVirtualScrollViewport.scrollToIndex(2000);
  }

  <ul class="list">
    <cdk-virtual-scroll-viewport style="height:264px" itemSize="88">
      <ng-container *cdkVirtualFor="let n of numbers">
        <li style="height:88px">{{ n }}</li>
      </ng-container>
    </cdk-virtual-scroll-viewport>
  </ul>

Answer 1

У меня такая же проблема, у меня не очень элегантное решение

contentCheck = 0

ngAfterViewChecked() {
  if (this.contentCheck < 3) {
  this. cdkVirtualScrollViewport.scrollToIndex(4000);
  this.contentCheck++;
 }
}

После 3-х проверок scrollToIndex работает.

Answer 2

Хотя это не идеальное решение, вы можете добиться этого, объединив afterViewInit с setTimeout:

ngAfterViewInit() {
    setTimeout(() => {
        this.cdkVirtualScrollViewport.scrollToIndex(50);
    });
}

Answer 3

Мы можем использовать setRenderedRangeметод:

      @ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;

ngAfterViewInit() {
    const offset = 10; // that's an example
    if (this.virtualScroll) {
        setTimeout(() => {
            const currentRange = this.virtualScroll.getRenderedRange();
            this.virtualScroll.setRenderedRange({ start: currentRange.start + offset, end: currentRange.end + offset });
        });
    }
}

Примечание. Я не уверен, что это относится к моему варианту использования, но, просто установив ожидаемый диапазон, предыдущие элементы, похоже, не учитываются (мы не можем прокручивать вверх). Кажется важным использовать scrollToIndexпоэтому прокрутка правильно обновляется. Вот мой обходной путь: установка диапазона минус один, а затем прокрутка еще на один:

          const currentRange = this.virtualScroll.getRenderedRange();
    this.virtualScroll.setRenderedRange({ start: currentRange.start + offset - 1, end: currentRange.end + offset - 1});
    this. virtualScroll.scrollToIndex(offset);