Este artículo es el segundo que hablo sobre el sistemas de rutas de Angular, si todavía no sabes cómo configurarlas te dejo un artículo que te lo explica paso a paso.
Creacion del html:
En el archivo app.component.html ubicado en la carpeta app/ es donde nos tocará trabajar de ahora en adelante.
Para este ejemplo crearemos un html sencillo que constará de un titulo, una etiqueta header y una pequeña lista con enlaces dentro, además de la etiqueta router-outlet que sirve para que no cargue ninguna ruta por defecto:
<h1>Prueba rutas en Angular</h1>
<header>
<ul>
<li><a href="">Inicio</a></li>
<li><a href="">Sobre mi</a></li>
<li><a href="">Contacto</a></li>
</ul>
</header>
<router-outlet></router-outlet>
Para comprobar si nos funciona iniciamos nuestro proyecto en la consola con el comando:
ng serve
Y nos debería de salir algo parecido a esto:
RouterLink:
Ahora en los enlaces quitamos la etiqueta href y ponemos lo siguiente:
<li><a [routerLink]="['/inicio']" >Inicio</a></li> <li><a [routerLink]="['/sobre-mi']" >Sobre mi</a></li> <li><a [routerLink]="['/contacto']" >Contacto</a></li>
RouterLink es una directiva que sacó Angular hace no mucho que sirve cómo un substituto al href.
Lo que tenemos que poner entre las comillas simples es el nombre que le dimos a las rutas en su configuración inicial.
Lo útil de usar esto es que la página no se recarga en ningún momento gracias a que solo se actualizan los componentes a los cuales estemos entrando.
RouterLinkActive:
Es una directiva que es muy útil a la hora de usar un sistema de navegación.
Su utilidad es que cuando estemos en la página llamemos a una clase en el css para que haga algo. Lo más normal que se hace es que cuando estemos en cualquier página se nos marque con un fondo de cualquier color en la barra de navegación donde nos encontramos. Aqui dejo el codigo:
<li><a [routerLink]="['/inicio']" [routerLinkActive]="['activado']">Inicio</a></li> <li><a [routerLink]="['/sobre-mi']" [routerLinkActive]="['activado']">Sobre mi</a></li> <li><a [routerLink]="['/contacto']" [routerLinkActive]="['activado']">Contacto</a></li>
Y su css lo crearemos en la carpeta assets y lo añadiremos al fichero de configuración de Angular, el fichero angular.json en el apartado styles:
"styles": [
"src/assets/style.css"
],
El css del proyecto:
.activado{
background-color: gray;
}
Y así es como debería de quedar, al ir navegando estará cambiando su texto y se pondrá de color gris su fondo:
¡Esperamos que te haya sido útil!