这是一个非常令人沮丧的问题。我完成了我的应用程序,然后是最后一件事。我一直在监听路由器上的更改,并试图让它在更改后自动滚动到顶部。我在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;
我尝试了几种变体,特别是使用ElementRef抓取router-outlet元素并设置scrollTop = 0,但这也没有效果。也尝试使用document.body,但没有效果。我在这里缺少什么?
答案 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
然后将其注入我想要自动滚动到顶部的每个页面,然后在页面中调用它。
ngAfterViewInit() {
[your scroll service].scrollToTop();
}
&#13;
还必须把这个id(这是服务使用的)放在我的路由器插座周围的div上,而不是身体。当我瞄准身体标签时,滚动没有做任何事情。当我将div定位在路由器插座外面时,它可以工作。
<div id="top-of-page">
<router-outlet></router-outlet>
</div>
&#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
}
});