DEV Community

loading...
Cover image for Navegar entre rutas de Angular utilizando routerLink

Navegar entre rutas de Angular utilizando routerLink

facurodriguez profile image Facundo Rodriguez ・2 min read

En el post anterior realizamos agregamos la primer ruta en nuesta aplicación Angular.

Aprovechando que ya contamos con el array de definiciones de rutas de nuestra aplicación dentro de app.module.ts vamos a crear una ruta nueva y navegar utilizando routerLink.

Nuevo componente

Vamos a comenzar creando un nuevo componente con el siguiente comando del CLI:

ng generate component posts
Enter fullscreen mode Exit fullscreen mode

Luego, agregar una nueva ruta sólo consistiría en sumar el nuevo componente a la colección de rutas:

const routes: Route[] = [
  { path: "home", component: HomeComponent },
  { path: "posts", component: PostsComponent },
  { path: "**", redirectTo: "home" }
];
Enter fullscreen mode Exit fullscreen mode

Y, por último, añadimos la posibilidad de navegar entre las rutas de nuestra aplicación en app.component.html:

<!-- app.component.html -->
<nav>
  <a href="/home">Inicio</a> |
  <a href="/posts">Posts</a>
</nav>
<router-outlet></router-outlet>
Enter fullscreen mode Exit fullscreen mode

Excelente!! Al ejecutar el comando ng serve ya podremos navegar por nuestra aplicación.

Pero puede que estemos frente a un pequeño problema. Al navegar a la nueva ruta se produce un refresh de la página y esto puede llegar a ser algo no deseado si pensamos crear una SPA porque estamos perdiendo el estado de la aplicación ante cada click en los links.

Incorporar routerLink

Para solucionar este inconveniente vamos a utilizar la directiva routerLink para cambiar de página evitando hacer un refresh.

Simplemente lo que debemos hacer es reemplazar nuestros href por routerLink:

<!-- app.component.html -->
<nav>
  <a routerLink="/home">Inicio</a> |
  <a routerLink="/posts">Posts</a>
</nav>
Enter fullscreen mode Exit fullscreen mode

Y ahora cuando hacemos click entre las rutas de nuestra aplicación ya no se reliza el refresh de la página!!

Aquí se puede ver el código final:

Stackblitz

Discussion

pic
Editor guide