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