Il existe un modèle merveilleux d'optimisation du rendu de grands ensembles de données appelé défilement virtuel. Dans ce cas précis, j'utilise l'API de l'API Angular Material CDK https://material.angular.io/cdk / scrolling / overview pour obtenir ce comportement. Cependant, j'ai une exigence lorsque l'utilisateur accède à une page différente et revient, l'utilisateur doit être à l'emplacement spécifique qu'elle a quitté (par exemple, naviguer vers les détails de l'élément 3498 et quand revient doit commencer à l'élément 3498 et non à l'élément 1). Quelle est la meilleure façon d'y parvenir?
3 Réponses :
Vous pouvez injecter la vue CdkVirtualScrollViewport enfant de la vue:
@ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;
puis vous pouvez jouer avec des méthodes comme this.getOffsetToRenderedContentStart () et this.setRenderedContentOffset () pour enregistrer et restaurer l'emplacement de défilement d'origine.
Vous pouvez, par exemple, stocker ces informations dans un service ou un stockage local.
Mettre en œuvre ce que Francesco Borzi a suggéré et cela fonctionne parfaitement. voici le stackblitz mise en œuvre . La plupart de l'action se déroule dans le fichier d'exemple cdk-virtual-scroll-overview.
Il convient de mentionner qu'il existe une autre paire de méthodes utiles: measureScrollOffset et scrollToOffset. Méthode measureScrollOffset:
Obtient le décalage de défilement actuel à partir du début de la fenêtre (en pixels).
Donc, cela prend en compte ce que l'utilisateur voit, pas le contenu rendu - comme getOffsetToRenderedContentStart - pour cette méthode, je n'ai pas pu récupérer de petites valeurs de défilement relatives.
Comment faites-vous le suivi de l'endroit où se trouvait l'utilisateur? C'est à dire. Comment Angular se souvient-il que vous étiez au point 3498? Si vous ne l'avez nulle part, vous ne pourrez pas y faire défiler.
Je peux attribuer un uid à chaque élément, et lorsque l'utilisateur revient en arrière, faites défiler jusqu'à cet élément, mais le défilement virtuel ne rend que les éléments qui correspondent à la fenêtre d'affichage et l'élément ne sera probablement pas dans le DOM donc ne peut pas faire défiler jusqu'à l'élément qui n'existe pas