Question

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

app.component.ts

＆＃13;

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

＆＃13;

app.component.html

＆＃13;

<div class="mainbody bgc-white">
  <router-outlet></router-outlet>
</div>

＆＃13;

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

Answer 1

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

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

Answer 2

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<div id="top-of-page">
  <router-outlet></router-outlet>
</div>

＆＃13;

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

Answer 3

将此添加到您的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();
  }

Answer 4

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

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

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

4 个答案: