Existem algumas soluções, certifique-se de verificar todas :)
A saída do roteador emitirá o evento `activate` sempre que um novo componente estiver sendo instanciado, então podemos usar` (activate) `para rolar (por exemplo) para o topo:
app.component.html
<router-outlet (activate)="onActivate($event)" ></router-outlet>
app.component.ts
onActivate(event) {
window.scroll(0,0);
//or document.body.scrollTop = 0;
//or document.querySelector('body').scrollTo(0,0)
...
}
Use esta resposta para uma rolagem suave:
onActivate(event) {
let scrollToTop = window.setInterval(() => {
let pos = window.pageYOffset;
if (pos > 0) {
window.scrollTo(0, pos - 20); // how far to scroll on each step
} else {
window.clearInterval(scrollToTop);
}
}, 16);
}
Se você deseja ser seletivo, digamos que nem todos os componentes devam acionar a rolagem, você pode verificar, então:
onActivate(e) {
if (e.constructor.name)==="login"{ // for example
window.scroll(0,0);
}
}
Desde o Angular6.1, também podemos usar `{scrollPositionRestoration: 'enabled'}` em módulos carregados rapidamente e será aplicado a todas as rotas:
RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'enabled' })
Ele também fará a rolagem suave já. No entanto, isso tem o inconveniente de fazer isso em todos os roteamentos.
Uma outra solução é fazer a rolagem superior na animação do roteador. Adicione isso em cada transição em que deseja rolar para o topo:
query(':enter, :leave', style({ position: 'fixed' }), { optional: true })