在 angular2 的新页面中，路线更改视图不会滚动到顶部

Posted 2023-02-22

【中文标题】在 angular2 的新页面中，路线更改视图不会滚动到顶部

【英文标题】：On route change view doesn't scroll to top in the new page in angular2

【发布时间】：2017-02-17 07:17:03

【问题描述】：

我已经在router-outlet 上尝试过autoscroll="false" 但似乎不起作用，是否有任何默认方法 angular2 在不使用任何第三方库的情况下做同样的事情？

【问题讨论】：

Angular 2 Scroll to top on Route Change的可能重复

【参考方案1】：

直到 Angular 6

这里有一个更简洁的方法：

this.router.events.subscribe((ev:any) => 
  if (ev instanceof NavigationEnd) 
    window.scrollTo(0, 0);
  
);

来自 Angular 6.1

您可以在路由器配置中执行此操作。正如here 所建议的那样，这可能会成为未来版本的常态。

RouterModule.forRoot(routes, scrollPositionRestoration: 'enabled')

【参考方案2】：

在这里找到答案https://***.com/a/39601987/5043867

我们可以订阅路由更改事件并滚动到顶部

ngOnInit() 
    this.router.events.subscribe((evt) => 
        if (!(evt instanceof NavigationEnd)) 
            return;
        
        document.body.scrollTop = 0;
    );

更新-

在 Angular v6+ 中，引入了一个新方法 scrollPositionRestoration。欲了解更多信息，请在此处阅读

https://medium.com/@PardeepJain/deep-dive-into-angular-routing-scrolling-to-top-debugging-and-lot-more-a995c08498d3

【讨论】：

我希望有一种更简单的方法 - 不是将代码放在 UI 中的一个地方，而是现在放在组件代码中

这也是一种更简单的方法，我认为我们必须在主应用程序组件中编写一次代码

@Pradeep Jain ：如果我从一条路线更改为另一条路线，这很好用，但是在同一路线上的参数更改时它不会滚动到顶部，我在 this._route.params.subscribe 上添加了此服务事件仍然保持在同一位置

是的，因为对于相同的路由，这个事件不会触发，所以在这种情况下你需要根据参数的变化来改变你的逻辑

【参考方案3】：

Angular 最近引入了一项新功能，在 Angular 路由模块内部进行如下更改

@NgModule(
  imports: [RouterModule.forRoot(routes,
    scrollPositionRestoration: 'top'
  )],

【参考方案4】：

是的，您可以参考 Angular2-router 中的 fragments。

【讨论】：

请你详细说明你的答案，顺便谢谢你的回答:)