Hay algunas soluciones, asegúrese de revisarlas todas :)
La salida del enrutador emitirá el activate
evento cada vez que se cree una instancia de un nuevo componente, por lo que podríamos usar (activate)
para desplazarnos (por ejemplo) hacia la parte superior:
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)
...
}
Utilice, por ejemplo, esta solución para un desplazamiento 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);
}
Si desea ser selectivo, digamos que no todos los componentes deben activar el desplazamiento, puede verificarlo en una if
declaración como esta:
onActivate(e) {
if (e.constructor.name)==="login"{ // for example
window.scroll(0,0);
}
}
Desde Angular6.1, también podemos usar { scrollPositionRestoration: 'enabled' }
en módulos cargados con entusiasmo y se aplicará a todas las rutas:
RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'enabled' })
También hará el desplazamiento suave, ya. Sin embargo, esto tiene el inconveniente de hacerlo en todas las rutas.
Otra solución es hacer el desplazamiento superior en la animación del enrutador. Agregue esto en cada transición donde desee desplazarse hacia la parte superior:
query(':enter, :leave', style({ position: 'fixed' }), { optional: true })