Angular - Как открыть виртуальную прокрутку по центру нажатого изображения?

Question

После пары дней исследований и экспериментов мне кажется, что я не могу воспроизвести следующее типичное поведение Instagram в Angular 8, используя Angular Material's cdk-virtual-scroll-viewport.

1. Щелкните изображение из сетки изображений профиля
2. Откройте бесконечную прокрутку изображений с центром на изображении, по которому щелкнули мышью, при этом предыдущее и следующее изображения загружены ниже и выше него.

Проблема, в частности, заключается в открытии виртуальной прокрутки с центром на изображении, по которому щелкнули мышью.

---

Моя настройка:

1. Компонент профиля загружает сетку изображения с *ngFor="let post of posts"
2. При щелчке запускается новый компонент временной шкалы, получающий вышеуказанный массив posts как состояние с [state]='{ data: posts }', вместе с позицией массива поста, по которому был сделан щелчок.
3. Все работает, канал (временная шкала, как я его называю) загружен, но, хотя я могу заставить его прокручиваться до позиции сообщения, по которому щелкнули, с помощью this.viewPort.scrollToIndex(index), я могу ' Я загружаю его на эту позицию ции напрямую.

Почему я не хочу, чтобы он просто прокручивался туда, хотя это происходит почти мгновенно? Потому что все HD-изображения, которые предшествуют публикации, по которой был сделан щелчок, будут извлечены с сервера для загрузки по мере того, как лента прокручивается туда. Представьте, что перед выбранной публикацией есть еще 20 других изображений.

Что еще я пробовал:

Я пробовал вырезать массив сообщений прямо перед выбранной публикацией , загружая эту вторую часть массива (которая начинается с того, что он щелкнул по записи) с помощью *cdkVirtualFor="let post of posts", а затем нажимая первую часть массива в начале posts, чтобы она загрузилась выше сгиба. Но когда первая часть массива добавляется в начало posts, представление перемещается в верхнюю часть страницы (первое сообщение) вместо загрузки добавленных сообщений над сгибом, что я хочу.

Мы будем очень признательны за любые идеи о том, как сделать это колдовство.

Answer 1

Я до сих пор не нашел способ начать рендеринг из сообщения, на которое щелкнули, но лучший обходной путь, который я нашел, был следующий.

Оказывается, используя this.viewPort.scrollToIndex(scrollIndex, "auto") - обратите внимание на auto параметр - на самом деле не прокручивает страницу, а практически телепортирует прямо в нужный индекс. Это означает, что если вы вызовете метод достаточно быстро, никакие другие элементы между началом страницы и индексом, на который вы попадаете, не будут загружены с сервера. Вы можете проверить этот эксперимент в этом StackBlitz , открыв вкладку «Сеть» в chrome инструментах разработчика.

Теперь попытаемся запустить указанную выше команду так, как она была задумана, например:

  ngAfterViewInit() {
    this.viewPort.scrollToIndex(i);
  }

вы наверняка поймете, что это не работает. Было предложено два решения этой ошибки здесь . Оба они работают, но вызов setTimeout() заметно медленнее, поскольку вы фактически видите «привязку» к новому индексу при загрузке страницы. Таким образом, лучший способ справиться с этим - запустить метод scrollToIndex() в ловушке ngAfterViewChecked() вместо ngAfterViewInit(), например:

  ngAfterViewChecked() {
    this.viewPort.scrollToIndex(i);
  }

Это не идеальное решение, но оно практически воспроизвести желаемый опыт для конечного пользователя.