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路線變化

回答

相關問題