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

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"，使其保持禁用状态。