javascript - page - navigationend angular 4

Angular 2 desplaza hacia arriba en cambio de ruta no funciona

Question

Estoy tratando de desplazarme a la parte superior de mi página en mi sitio de angular 2 cuando la ruta cambia, he intentado lo siguiente, pero no sucede nada. Cuando cambio la ruta de una página a otra, la página se desplaza hasta donde estaba. en la primera página:

import { Component, OnInit } from ''@angular/core'';
import { Router, NavigationEnd } from ''@angular/router'';
@Component({
selector: ''my-app'',
template: ''<ng-content></ng-content>'',
})
export class MyAppComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
this.router.events.subscribe((evt) => {
if (!(evt instanceof NavigationEnd)) {
return;
}
window.scrollTo(0, 0)
});
}
}

¿Qué estoy haciendo mal?

Answer 1

El enrutador emitirá un evento cuando se cargue un nuevo componente en el <router-outlet> para que pueda adjuntarle un evento.

Así que en su componente con <router-outlet> use:

<router-outlet (activate)="scrollTop($event)">

y luego en el mismo componente donde colocó <router-outlet> agregue el siguiente método:

scrollTop(event) {
window.scroll(0,0);
}

Answer 2

Espere a que el componente se inicialice antes de iniciar el desplazamiento. Así que mejor poner este código bajo la función ngAfterViewInit .

 ngAfterViewInit() {
this.router.events.subscribe((evt) => {
if (!(evt instanceof NavigationEnd)) {
return;
}
window.scrollTo(0, 0)
});
}

Answer 3

Esta solución funciona perfectamente en mi proyecto:

export class AppComponent {
constructor (
private _router: Router,
) {
this._subscribeRouteEvents();
}
private _subscribeRouteEvents (): void {
this._router.events.subscribe(e => {
if (!(e instanceof NavigationEnd)) return;
window.scrollTo(0, 0);
});
}
}

Answer 4

Este problema similar fue enfrentado por mí, debido al estilo aplicado al cuerpo. es decir

body {
height: 100%;
overflow-x: hidden;
}

Si quité este estilo, mi diseño se vio muy afectado.

En lugar de eliminar el estilo, probé la solución a continuación y me funcionó ...

Solución:

export class AppComponent implements OnInit {
constructor(private router: Router, private changeDetect: ChangeDetectorRef) {
}
ngOnInit() {
this.router.events.subscribe((evt) => {
if (!(evt instanceof NavigationEnd)) {
return;
}
// Change height:100% into auto
$(''body'').css(''height'', ''auto'');
// Successfully scroll back to top
$(''body'').scrollTop(0);
// Remove javascript added styles
$(''body'').css(''height'', '''');
this.changeDetect.detectChanges();
});
}
}

Answer 5

 constructor(
private router: Router,
private ngZone: NgZone) {
router.events.subscribe((event: RouterEvent) => {
this._navigationInterceptor(event);
});
}
private _navigationInterceptor(event: RouterEvent): void {
if (event instanceof NavigationStart) {
}
if (event instanceof NavigationEnd) {
window.scrollTo({
top: 0
});
// or, window.scroll(0,0);
}
}