window.scrollTo(0,0)和scrollTop = 0不能处理Angular 2路由更改

时间:2017-10-05 19:48:04

标签: angular angular2-routing

这是一个非常令人沮丧的问题。我完成了我的应用程序,然后是最后一件事。我一直在监听路由器上的更改,并试图让它在更改后自动滚动到顶部。我在Google上尝试了10种不同的解决方案,没有任何效果。我知道它与路由器有关,但我无法弄清楚为什么它不会滚动。这是我目前正在使用的代码。

app.component.ts



this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
  window.scroll(0, 0);
});




app.component.html



<div class="mainbody bgc-white">
  <router-outlet></router-outlet>
</div>
&#13;
&#13;
&#13;

我尝试了几种变体,特别是使用ElementRef抓取router-outlet元素并设置scrollTop = 0,但这也没有效果。也尝试使用document.body,但没有效果。我在这里缺少什么?

4 个答案:

答案 0 :(得分:3)

我已经设法通过setTimeout hack解决了相同的问题,

scrollToTop(): void {
  setTimeout(() => window.scroll(0, 0), 0);
}

答案 1 :(得分:1)

终于能够让这个工作了。没有别的东西适合我。

我必须创建这个滚动服务: https://github.com/angular/angular/blob/master/aio/src/app/shared/scroll.service.ts

然后将其注入我想要自动滚动到顶部的每个页面,然后在页面中调用它。

&#13;
&#13;
ngAfterViewInit() {
  [your scroll service].scrollToTop();
}
&#13;
&#13;
&#13;

还必须把这个id(这是服务使用的)放在我的路由器插座周围的div上,而不是身体。当我瞄准身体标签时,滚动没有做任何事情。当我将div定位在路由器插座外面时,它可以工作。

&#13;
&#13;
<div id="top-of-page">
  <router-outlet></router-outlet>
</div>
&#13;
&#13;
&#13;

我从BogdanC链接的页面获得了这个解决方案,但是必须修改它以适应我的情况。

答案 2 :(得分:1)

将此添加到您的app.component正在使用路由器出口

 ngOnInit() {
    this.routerSubscription = this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    )
      .subscribe(() => {
        document.querySelector('mat-drawer-content').scrollTop = 0;
      });
  }

  ngOnDestroy() {
    this.routerSubscription.unsubscribe();
  }

答案 3 :(得分:0)

是的,我正在使用Angular 5,并且您使用的相同代码无法正常工作,因此我使用了下面的代码,它们也都可以正常工作,

this.router.events.subscribe(evt => {
    if (evt instanceof NavigationEnd) {
         document.body.scrollTop = 0; // scroll top to body element
    }
});