window.scrollTo（0，0）和scrollTop = 0不适用于Angular 2路线变化

这是一个非常令人沮丧的问题。除了最后一件事之外，我已经完成了我的申请。我一直在监听路由器上的变化，并试图在变化时自动滚动到顶部。我已经在Google上尝试了10种不同的解决方案，没有任何效果。我知道它与路由器有关，但我无法弄清楚为什么它不会滚动。这是我目前使用的代码。window.scrollTo（0，0）和scrollTop = 0不适用于Angular 2路线变化

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>

我尝试的这个若干变化，具体地抓住路由器出口元件用ElementRef并设置scrollTop = 0，但那也没有效果。还尝试使用document.body，并没有任何效果。我在这里错过了什么？

来源

2017-10-05 jtbitt

看看最后的答案[这里]（https://github.com/angular/angular/issues/7791） – BogdanC

我已经尝试了那里的一切。即使在我构建自动滚动服务时，滚动实际上也不会起作用。无论出于何种原因，在任何解决方案中，我的卷轴都不会做任何事 – jtbitt

这个问题缺乏http://stackoverflow.com/help/mcve而且毫无意义，因为它通常通过在路由事件上调用window.scroll来解决，并且它有望运行。 – estus

终于能够得到这个工作。没有别的东西在为我工作。

我要创建这个卷轴服务： https://github.com/angular/angular/blob/master/aio/src/app/shared/scroll.service.ts

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

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

也只好把这个ID（这是什么服务使用）围绕我的路由器出口股利，而不是身体。当我瞄准身体标签时，卷轴无所事事。当我在路由器插座外部定位div时，它工作正常。

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

我从BogdanC链接的页面此解决方案，但不得不修改它在我的情况下工作。

来源

2017-10-05 22:58:33 jtbitt

window.scrollTo（0，0）和scrollTop = 0不适用于Angular 2路线变化

回答

相关问题