Ci sono alcune soluzioni, assicurati di controllarle tutte :)
La presa del router emetterà l'evento "activ" ogni volta che viene istanziato un nuovo componente, quindi potremmo usare "(attivare)" per scorrere (ad esempio) verso l'alto:
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)
...
}
Usa questa risposta per uno scorrimento fluido:
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 desideri essere selettivo, diciamo che non tutti i componenti dovrebbero attivare lo scorrimento, puoi controllarlo, quindi:
onActivate(e) {
if (e.constructor.name)==="login"{ // for example
window.scroll(0,0);
}
}
A partire da Angular6.1, possiamo anche usare "{scrollPositionRestoration: 'enabled'}" sui moduli caricati con entusiasmo e verrà applicato a tutte le rotte:
RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'enabled' })
Eseguirà anche lo scorrimento fluido. Tuttavia questo ha l'inconveniente di farlo su ogni percorso.
Un'altra soluzione è eseguire lo scorrimento dall'alto sull'animazione del router. Aggiungilo in ogni transizione in cui desideri scorrere verso l'alto:
query(':enter, :leave', style({ position: 'fixed' }), { optional: true })