Solución:
Hay algunas soluciones, asegúrese de revisarlas todas 🙂
La salida del enrutador emitirá el activate evento cada vez que se crea una instancia de un nuevo componente, por lo que podríamos usar (activate) para desplazarse (por ejemplo) hasta 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 un 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 en la que desee desplazarse hacia la parte superior:
query(':enter, :leave', style({ position: 'fixed' }), { optional: true })
Si enfrenta este problema en Angular 6, puede solucionarlo agregando el parámetro scrollPositionRestoration: 'enabled' al RouterModule de app-routing.module.ts:
@NgModule({
imports: [RouterModule.forRoot(routes,{
scrollPositionRestoration: 'enabled'
})],
exports: [RouterModule]
})
EDITAR: Para Angular 6+, use la respuesta de Nimesh Nishara Indimagedara mencionando:
RouterModule.forRoot(routes, {
scrollPositionRestoration: 'enabled'
});
Respuesta original:
Si todo falla, cree algún elemento HTML vacío (por ejemplo: div) en la parte superior (o el desplazamiento deseado a la ubicación) con la plantilla (o plantilla principal):
<div id="top"></div>
Y en componente:
ngAfterViewInit() {
// Hack: Scrolls to top of Page after page view initialized
let top = document.getElementById('top');
if (top !== null) {
top.scrollIntoView();
top = null;
}
}