Question

我有2个选项可滚动到页面顶部。首先，

router.events.subscribe((evt) => {
    if (evt instanceof NavigationEnd) {
        window.scroll({
            top: 0,
            left: 0,
            behavior: 'smooth'
        });
    }
});

Angular 6提供了第二个选项，

RouterModule.forRoot(AppRoutes, { 
      scrollPositionRestoration: "enabled"
})

当我更改路线时，Page移至顶部，按预期运行。我在使用子路由的页面底部几乎有选项卡部分。触发子路由后，页面将移至页面顶部，而不是保留在选项卡部分中。

因此，我需要在子路径上禁用滚动到顶部功能。有什么办法吗？

感谢任何帮助/想法。

Answer 1

如果在滚动到顶部之前检查当前路线是选项卡部分的子路线之一，则可能会起作用。

//for scalability, define routes you don't want to scroll to top in a string array

const noScrollRoutes: string[] = ['route/tabSubRoute1', 'route/tabSubRoute2'];

router.events.subscribe((evt) => {
    if (evt instanceof NavigationEnd) {
        if(noScrollRoutes.find(this.router.url) == undefined){ //if can't a route in predefined array, scroll to top
           window.scroll({
               top: 0,
               left: 0,
               behavior: 'smooth'
           });
        }
    }
});

此外，您可能需要删除scrollPositionRestoration: "enabled"，使其保持禁用状态。

Angular 7禁用滚动到子路线更改顶部

1 个答案: