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