Name: Development & System
Telephone: +

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

Imaginemos el siguiente supuesto:

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']);
    }
}

Gestión de rutas Angular

Gestión de rutas mediante atributos

Gestión de rutas mediante programación