路线导航后Angular2视图不会滚动到顶部[重复]答案

【问题标题】：Angular2 view does not scroll to top after route navigation [duplicate]路线导航后Angular2视图不会滚动到顶部[重复]
【发布时间】：2017-06-18 01:48:30
【问题描述】：

我正在使用一个简单的链接导航到另一个页面，使用 HashLocationStrategy ：

<a href="/#/mypage">My Page</a></div>

点击上面的链接后，mypage 正在加载，但由于我向下滚动上一页，它被加载到页面中间（与上一页相同的滚动位置）。

我确实有一个解决方法，但为什么会发生这种情况？

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

我确实有一个解决方法，但为什么会发生这种情况？

它发生的原因之一，或者更好地说：它没有发生，因为 Angular2 路由器可用于在给定的插座内导航。您可以拥有多个named router outlets（或页面下方的某个位置），并且在导航其中任何一个后将页面滚动到顶部会破坏该行为。正如我们所见，添加滚动功能并不是很难自己实现。也值得一读：Named router outlets in Angular2

【讨论】：

【解决方案2】：

一种解决方法是在目标页面上定义：

@Component({
  ...
})
export class MyPageComponent {

   ngAfterViewInit() {
       window.scrollTo(0, 0);
   }
}

【讨论】：

已更正 :) 感谢您指出
它对我有用，但我必须将它添加到我的每一个组件中。有没有办法让它在全球范围内应用？感谢您的回答。

【解决方案3】：

这是因为 Angular 阻止了链接点击事件的默认操作，因此页面不会滚动到顶部。

作为一种解决方法，只需订阅router.events 并过滤掉 NavigationEnd 事件：

this.router.events.subscribe(event => {
  if(event instance of NavigationEnd) {
     ... scroll to top
  }
}

【讨论】：

【解决方案4】：

发生这种情况是因为没有实际的页面刷新。尚无关于如何在不使用解决方法的情况下触发此操作的实现。我想主要问题是你可以在同一个屏幕上拥有多个router-outlet，并且在某些情况下它不应该向上滚动。

在我的AppComponent 中，我使用了这个解决方法。您可能使用相同的：

constructor(private _router: Router) {}

ngOnInit() {
  this._router.events.subscribe((event: NavigationEnd) => {
    if(event instanceof NavigationEnd) {
      window.scrollTo(0, 0);
    }
  })
}

【讨论】：

很有魅力，谢谢
我试过了，但它不适合我，因为我的代码中有这个块，html,body { overflow-x: hidden;删除这将解决问题，但我无法删除它，因为它会影响其他组件。还有其他解决方案吗？
@khush 最新的angular (6.1.0) 支持恢复滚动
但我现在的项目是在 Angular v5 上