Как сделать так, чтобы Angular ссылки на роутер отключали прокрутку вверх страницы?

Question

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

Answer 1

Добавьте это в модуль, куда вы импортируете RoutingModule.forRoot()

imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'disabled' })],

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

class AppModule {
  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]);
     }
   });
  }
}