window.scrollTo(0, 0) 和 scrollTop = 0 不适用于 Angular 2 路由更改

Question

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

app.component.ts

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

应用程序组件.html

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

我已经尝试了几种变体，特别是使用 ElementRef 抓取路由器出口元素并设置 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

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

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

还必须将此 id （这是服务使用的）放在我的路由器出口周围的 div 上，而不是主体上。当我瞄准 body 标签时，滚动条什么也没做。当我将 div 定位到路由器出口之外时，它起作用了。

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

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