Como ya se ha comentado en entradas anteriores, los componentes son aquellos elementos que son representados en la aplicación. Por ejemplo si una aplicación consta de 3 partes claramente diferenciadas, al menos tendrá cuatro componentes: contenedor, login, registro, home
Para poder gestionar la transición entre cada uno de los componentes y navegar entre ellos, angular utiliza lo que se conoce como el enrutador, de la clase @angular/router. Este router se puede crear manualmente o automáticamente en el momento de creación del proyecto, ya que el asistente así lo pregunta (en caso de decir que no se puede crear manualmente):
El archivo que maneja las rutas es conocido como app.routing.ts el cual tiene el siguiente contendido:
- Importaciones del tipo Routes y del modulo RouterModule para poder ser utilizados en el propio archivo
import { RouterModule, Route } from "@angular/router";
- Array de Route donde se indica el path (nombre que se utilizará para la ruta del componente, usando ** si se realiza una ruta que no coincida con ningún path), componente (nombre de la clase que representa el componente), redirectTo (si se quiere hacer una redirección a un path concreto)
const ROUTES: Route[] = [ { path: "cuerpo", component: BodyComponent }, { path: "inicial", component: InicialComponent }, { path: "directivas", component: DirectivasComponent }, { path: "rutas", component: RutasComponent }, { path: "**", pathMatch: "full", redirectTo: "home" } ];
- Variable exportada para que sea accesible desde otras clases (aquella que será importada desde el módulo) de forma que todas las rutas puedan ser gestionadas.
export const APP_ROUTES = RouterModule.forRoot(ROUTES);
Adicionalmente el dato path asignado a ** le indicará el servicio Router a que componente se deberá redirigirse en caso de no existir ninguna coincidencia. Es importante que esta ruta siempre vaya la última, ya que el servicio evalúa las rutas de arriba a abajo en el array, por lo que si la evalúa antes que otras la cargaría por defecto aunque estén declaradas posteriormente en el array. En el ejemplo anterior:
- Si se introduce la URL http://localhost:4200/inicial se mostrará el componente InicialComponent
- Si se introduce la URL http://localhost:4200/ejemplo, no se encontrará ninguna coincidencia por lo que redireccionará al home
Una vez hecho esto el archivo de rutas es válido. Para que pueda ser utilizado desde el módulo donde están los componentes que forman parte de las rutas. Para ello en el archivo app.module.ts, en la parte de importaciones se agrega la variable APP_ROUTES creada en el archivo de rutas.
@NgModule({ declarations: [ AppComponent, HeaderComponent, BodyComponent, FooterComponent, InicialComponent, DirectivasComponent, RutasComponent ], imports: [ BrowserModule, APP_ROUTES ], providers: [], bootstrap: [AppComponent] })
Las rutas ya pueden ser utilizadas, tan solo es necesario indicar en el archivo html en que parte van a ser puestas las rutas. Para ello hay que declarar la etiqueta router-outlet, la cual englobará el contenido de la ruta que sea llamada
<!--The content below is only a placeholder and can be replaced.--> <app-header></app-header> <div class="d-flex justify-content-center container-fluid" style="width: 100%; margin-top: 20px"> <router-outlet></router-outlet> </div> <app-footer></app-footer>
Gestión de rutas mediante atributos

En este caso se tienen los siguientes componentes (con sus .ts, .html, y .css asociados):
- AppComponent: Componente principal que será el cargado desde el archivo índex.html. En su parte de html está formado por las etiquetas menu-component y router-outlet
- HeaderComponent: Parte superior donde se muestra un barra de menú con las opciones de mostrado
- HomeComponent: Primera «pantalla» que aparece al cargar la aplicación.
- DirectivasComponent: «Pantalla» explicativa de las directivas estructurales
- RutasComponent: «Pantalla explicativa» de la gestión de rutas
Para poder gestionar las rutas desde atributos, estos serán incluidos en los elementos que permiten mostrar los diferentes componentes (previamente declarados en el archivo de rutas explicado arriba). El atributo que permite la redirección de rutas es routerLink, donde se indica un array de elementos que forma la ruta:
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Proyecto Ángular</a> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" [routerLink]="['inicial']" routerLinkActive="active">Inicio <span class="sr-only">(current)</span></a > </li> <li class="nav-item"> <a class="nav-link" [routerLink]="['directivas']" routerLinkActive="active" >Directivas </a> </li> <li class="nav-item"> <a class="nav-link" [routerLink]="['rutas']" routerLinkActive="active" id="navbar" role="button" aria-haspopup="true" aria-expanded="false"> Rutas </a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" /> <button class="btn btn-outline-success my-2 my-sm-0" type="submit"> Buscar </button> </form> </div> </nav>
Como se puede ver en el archivo html del header, cada una de las opciones utiliza el atributo routerLink para redirigir al componente correspondiente, utilizando el nombre declarado en el archivo de rutas. Se pone entre [] para indica que angular es el encargado de manejar esa ruta (mediante el archivo de rutas, ya que sino la igualdad no existiría) . El atributo routerLinkActive se iguala a una clase css para indicar que estilo se aplica cuando el elemento está seleccionado
Gestión de rutas mediante programación
En algunos casos es necesario realizar la redirección de rutas mediante código de programación, ya que por ejemplo se deben incluir parámetros. Para eso se programa un evento en el elemento que será pulsado para realizar la redirección y en el código ts del componente se utiliza el módulo Router, mediante la sintaxis es: this.variable.navigate([‘nombre_pat
<a class="nav-link" (click)='irRutas()' id="navbar" role="button" aria-haspopup="true" aria-expanded="false"> Rutas </a>
y en el archivo ts del componente
import { Component } from "@angular/core"; import { Route, Router } from '@angular/router'; @Component({ selector: 'app-header', templateUrl: `./header.component.html` }) export class HeaderComponent { constructor(private navegacion: Router){ } irRutas() { this.navegacion.navigate(['rutas']); } }