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);
    }
  }