Navegar entre rutas de Angular utilizando routerLink

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

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" }
];

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>

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>

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