typescript - Mantener la posición de desplazamiento al volver y cambiar de rutas en angular 5

Cargo algunos resultados de empleados y estoy usando paginación de 20 resultados por página. Cuando hago scroll hasta el último de la primera página, hago clic en él y el usuario es redirigido a otra página. Cuando el usuario hace clic en el botón de regresar, vuelven a los resultados de búsqueda, pero la posición del scroll se ha perdido. ¿Alguna recomendación de cómo puedo mantenerla?

Respuesta #1

Angular tiene algunas opciones adicionales que puedes aplicar al importar tu Módulo de enrutador, que pueden adaptarse a tus requisitos.

https://angular.io/api/router/ExtraOptions#scrollPositionRestoration

Tienen un ejemplo de desplazamiento específico para componentes. Nunca lo he probado yo mismo, pero parece coincidir con lo que estás tratando de lograr.

Respuesta #2

Agregar esto en tu archivo app.component.ts hace el truco, como dijo wingnod.

export class AppComponent {
  constructor(router: Router, viewportScroller: ViewportScroller) {
    router.events.pipe(
      filter((e: Event): e is Scroll => e instanceof Scroll)
    ).subscribe(e => {
      if (e.position) {
        // backward navigation
        viewportScroller.scrollToPosition(e.position);
      } else if (e.anchor) {
        // anchor navigation
        viewportScroller.scrollToAnchor(e.anchor);
      } else {
        // forward navigation
        viewportScroller.scrollToPosition([0, 0]);
      }
    });
  }
}

La razón de este comportamiento es que la página aún no se había renderizado y scrollToPosition no tiene efecto. No hay un buen truco con timeout, pero funciona. DrDager

Nota

Angular en realidad tiene un problema abierto respecto a este problema