Angular2视图在路由导航后不会滚动到顶部。

20 浏览
0 Comments

Angular2视图在路由导航后不会滚动到顶部。

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

我的页面

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

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

0

3 答案

0 Comments

Angular2的视图在路由导航后没有滚动到顶部，这是因为Angular阻止了链接点击事件的默认行为。为了解决这个问题，可以订阅router.events事件，并过滤出NavigationEnd事件。代码如下：

this.router.events.subscribe(event => {
  if(event instance of NavigationEnd) {
     ... 滚动到顶部
  }
}

通过这个方法，就可以在路由导航结束后将视图滚动到顶部。

0
0 Comments

Angular2视图在路由导航后没有滚动到顶部的问题出现的原因是因为没有实际的页面刷新。目前还没有一种不使用变通方法来触发这个问题的实现方式。我猜主要问题是你可以在同一个屏幕上有多个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; } 删除这个块将解决问题，但我不能删除它，因为它会影响其他组件。还有其他的解决方法吗？

最新的angular (6.1.0)已经支持恢复滚动。

但是我的项目现在是Angular v5。

0
0 Comments

问题的原因是Angular2视图在路由导航后没有滚动到顶部。解决方法是在目标页面上定义一个ngAfterViewInit()方法，并在该方法中调用window.scrollTo(0, 0)来实现滚动到顶部的功能。但是这种解决方法需要在每个组件中都添加相同的代码，不太方便。有没有一种方法可以全局应用呢？感谢您的回答。

0