Как вернуться к той же порции набора данных при виртуальной прокрутке?

Существует замечательный паттерн оптимизации рендеринга больших наборов данных, называемый виртуальной прокруткой. В этом конкретном случае я использую https://material.angular.io/cdk/scrolling/overview, чтобы получить такое поведение. Тем не менее, у меня есть требование, когда пользователь переходит на другую страницу и возвращается, пользователь должен находиться в том конкретном месте, которое он покинул (например, перешел к деталям элемента 3498, а когда возвращается, должно начинаться с элемента 3498, а не элемента 1). Как лучше всего этого добиться?


angular design-patterns angular-cdk-virtual-scroll
person Azim Sadikov    schedule 13.05.2019    source источник
comment
Как вы отслеживаете, где был пользователь? Т.е. как Angular запоминает, что вы были на элементе 3498? Если у вас его нигде нет, вы не сможете перейти к нему.   -  person Berin Loritsch    schedule 13.05.2019
comment
Я могу назначить uid для каждого элемента, и когда пользователь переходит назад, прокрутка к этому элементу, но виртуальная прокрутка отображает только те элементы, которые подходят для области просмотра, и элемент, скорее всего, не будет в DOM, поэтому не могу прокрутить до элемента, который не существует   -  person Azim Sadikov    schedule 13.05.2019

Ответы (3)


arrow_upward
2
arrow_downward

Вы можете ввести CdkVirtualScrollViewport дочерний элемент представления:

@ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;

затем вы можете поиграть с такими методами, как this.getOffsetToRenderedContentStart() и this.setRenderedContentOffset(), чтобы сохранить и восстановить исходное местоположение прокрутки.

Вы можете, например, хранить эту информацию внутри службы или локального хранилища.

person Francesco Borzi    schedule 13.05.2019

arrow_upward
2
arrow_downward

Реализовал то, что предложил Франческо Борци, и он отлично работает. вот stackblitz реализация. Большая часть действий происходит в файле cdk-virtual-scroll-overview-example.

person Azim Sadikov    schedule 13.05.2019

arrow_upward
0
arrow_downward

Стоит отметить, что есть еще пара полезных методов: measureScrollOffset и scrollToOffset. Метод measureScrollOffset:

Получает текущее смещение прокрутки от начала области просмотра (в пикселях).

Таким образом, он принимает во внимание то, что видит пользователь, а не отображаемый контент - например, getOffsetToRenderedContentStart - для этого метода я не мог получить относительные небольшие значения прокрутки.

person greygreg87    schedule 19.10.2020