Posiciona vista al inicio nueva pagina Angular

Posiciona el cursor al inicio de la pagina cuando se carga una nueva ruta en Angular.

Publicado el: 26 de Agosto 2017 por Victor de Andrés Archivado en: Angular | Tips
angular tips

Cuando comencé a desarrollar este blog, tenía varias motivos para ello. Y uno de ellos era practicar nuevas tecnologías, para a medida que avanzaba en ellas encontrar problemas que solucionar para mejorar mis conocimientos como desarrollador, además de poder compartirlos con la comunidad.

Tal vez para algunos desarrolladores sean problemas triviales, o tal vez ayude a otros desarrolladores que tengan este mismo problema, o tal vez les proporcione una guía para solucionar algún otro problema. Mi intención es simple. Es compartir para que alguien lo pueda aprovechar, al igual que yo he aprovechado lo que otros han compartido.

Problema.

Cuando estas navegando en un dispositivo móvil, o en páginas con mucha altura puede darse el caso de que hayas realizado bastante scroll hacia abajo y cuando abres el enlace a otra página, esta se abre a la misma altura en la que se encuentra el link en la página anterior.

Esto es una diferencia de la navegación estándar en una aplicación web normal, donde la página seleccionada se vuelve a cargar y se inicia desde arriba por defecto. Y las páginas SPA, donde no se recarga la página y por tanto se mantiene el scroll que hayamos realizado mientras navegamos entre las páginas de nuestra aplicación SPA.

Para ello la primera solución que implante fue la siguiente:

      
  window.scroll(0,0)
      
    

Implantar esta instrucción nativa de javascript para situarse automáticamente al inicio de la pantalla. Y debía escribirla al inicio de cada componente.

Aunque era una solución que operativamente solucionaba el problema, no me parecía una solución de un buen desarrollador.

Solución.

Pero en el router de Angular tenemos el método events en el componente route al cual nos podemos suscribir en el cualquier momento. Los eventos que tenemos predefinido son los siguientes NavigationStart, NavigationCancel, NavigationEnd y NavigationError. Para solucionar este problema solo necesitamos el evento NavigationEnd.

Por lo que nuestro componente principal debería ser similar al siguiente.

      
  import { Component } from '@angular/core';
  import { Router, NavigationEnd } from '@angular/router';

  @Component({
    selector: 'app',
    template: '<router-outlet></router-outlet>'
  })

  export class AppComponent {

    constructor(private router: Router) {
      router.events
        .subscribe((event: NavigationEnd) => {
          window.scroll(0, 0);
        });
    }

  }
      
    

Como puedes observar esta es una solución mucho más limpia, que la primera que hicimos, y que además nos proporciona una nueva puerta a realizar ciertos eventos cuando estamos navegando en nuestra aplicación.

Una recomendación, no utilices está funcionalidad para aplicar la seguridad en tu aplicación. Para ello debes utilizar las guards. Si quieres puedes leer el siguiente artículo "Protecting routes using guards in angular" escrito por @PascalPrecht de Thoughtram donde podrás saber más sobre las guards de Angular.

Comentarios
Escribe tu comentario