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

Posted 2023-02-22

【中文标题】Angular 7在子路由更改上禁用滚动到顶部

【英文标题】：Angular 7 disable scroll to top on Sub Route Change

【发布时间】：2019-11-19 22:51:00

【问题描述】：

我有 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 将移动到按预期工作的顶部。 我使用子路由在页面的几乎底部有标签部分。当子路由被触发时，页面移动到页面顶部，而不是留在标签部分。

所以我需要禁用子路由上的滚动到顶部功能。有什么办法吗？

感谢任何帮助/想法。

【问题讨论】：

您是否找到了一个优雅的解决方案，因为我面临同样的问题？

有什么解决办法吗？

在某些项目中，滚动是给一个 div 而不是主体。所以，如果你在正文上写一个卷轴，它就行不通了。写到那个特定的div。有帮助吗？

【参考方案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"，保持禁用状态。

【讨论】：

感谢您的宝贵回答。它肯定会起作用，但我有一个非常大且不断发展的项目，我无法每次都更新。如果有任何方法可以动态检查子路由。这将是一项准确的一次性活动。

如果我正确理解了您的问题，您希望能够仅检查该选项卡部分的子路由吗？也许您可以尝试this.router.url.indexOf("tabSectionRoute") 或者您可以尝试使用 regexp.prototype.search()。例如。 \yourRegExp\.test(this.router.url)，使用 yourRegExp 作为正则表达式来测试 this.router.url 是否包含您的选项卡部分路由的一部分。