如何使 Angular 路由器链接禁用滚动到页面顶部？

Question

如何在单击 Angular 路由器链接时禁用滚动到顶部？ 我有三个子路由，我希望在同一个父页面之间导航，并且当用户单击这些链接时，我不希望应用程序在页面顶部滚动。 所以我希望页面保持在单击链接之前完全相同的位置。 有没有办法做到这一点？

Answer 1

将此添加到您导入RoutingModule.forRoot()的模块中

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

这将禁用整个应用中路由的滚动重置。如果您需要更多控制，您可以按照这样的模板实现自定义逻辑：

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