Tutorial Angular: Router en Angular

El router en Angular es un servicio esencial que permite la navegación entre diferentes vistas o componentes en una aplicación de una sola página (SPA). 

Proporciona una forma estructurada y eficiente de manejar la transición entre diferentes estados de la aplicación, utilizando URLs para representar estos estados.

La clase Router

La clase Router es el núcleo del sistema de enrutamiento de Angular. Proporciona la infraestructura necesaria para definir rutas, navegar entre ellas, y gestionar la información del estado de la ruta. La clase Router es parte del módulo @angular/router.

Características principales de la clase Router

• Definición de rutas: Permite configurar una lista de rutas disponibles en la aplicación. Cada ruta se asocia con un componente que se muestra cuando la ruta es activada.
• Navegación programática: Proporciona métodos para navegar entre rutas de manera programática.
• Gestión del estado de la ruta: Mantiene información sobre la ruta actual, parámetros de ruta, fragmentos de URL, y más.
• Eventos de enrutamiento: Emite eventos que permiten responder a cambios en la ruta, como inicio y finalización de la navegación, errores de navegación, etc.

Inyectar el objeto Router en un componente

Hay dos formas principales de inyectar el servicio Router en un componente Angular, a través del constructor y con la función inject(). Ambos métodos permiten utilizar el objeto Router para realizar navegaciones programáticas y acceder a otras funcionalidades del Router de Angular. La elección entre uno u otro dependerá del contexto específico de tu aplicación y tus preferencias de estilo de código.

Inyección a través del constructor

Para utilizar el servicio Router dentro de un componente, primero debes inyectarlo a través del constructor del componente. Esto se hace utilizando la inyección de dependencias de Angular. Esta es la forma tradicional de inyección de dependencias en Angular.

Ejemplo:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  constructor(private router: Router) {}

  navigateToHome() {
    this.router.navigate(['/home']);
  }
}

En este ejemplo, el servicio Router se inyecta en el componente MyComponent a través del constructor. Luego se puede utilizar el objeto router para realizar navegaciones programáticas.

Inyección usando la función inject()

En las versiones más recientes de Angular, se ha introducido una forma alternativa y más flexible de inyectar dependencias utilizando la función inject(). Esta función permite inyectar servicios y otros tokens de forma declarativa, sin necesidad de usar el constructor. inject() es especialmente útil en escenarios donde no se puede usar la inyección de constructor, como en funciones de fábrica o en campos de clase. Además, proporciona una sintaxis más concisa y puede mejorar la legibilidad del código en ciertos casos.

Ejemplo:

import { Component, inject } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-my-component',
  template: '...'
})
export class MyComponent {
  private router = inject(Router);

  navigateToHome() {
    this.router.navigate(['/home']);
  }
}

router.navigate()

El método router.navigate() es una forma de navegar programáticamente a una ruta específica dentro de la aplicación. Este método toma un array de comandos y un objeto opcional de parámetros adicionales.

Sintaxis:

router.navigate(commands: any[], extras?: NavigationExtras): Promise<boolean>

Parámetros:

• commands: Un array de comandos que definen la ruta a la que se debe navegar. Estos comandos pueden incluir segmentos de ruta, parámetros y otras instrucciones.
• extras: Un objeto opcional de tipo NavigationExtras que puede incluir parámetros adicionales como queryParams, fragment, preserveQueryParams, etc.

Ejemplo:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  constructor(private router: Router) {}

  goToUserProfile(userId: string) {
    this.router.navigate(['/user', userId], { queryParams: { sessionId: 12345 } });
  }
}

En este ejemplo, el método navigate() se utiliza para navegar a la ruta /user/:id con un parámetro de consulta sessionId.

router.navigateByUrl()

El método router.navigateByUrl() es otra forma de navegar programáticamente, pero en lugar de usar un array de comandos, utiliza una URL como cadena de texto.

Sintaxis:

router.navigateByUrl(url: string | UrlTree, extras?: NavigationBehaviorOptions): Promise<boolean>

Parámetros:

• url: La URL o UrlTree a la que se debe navegar. Esta puede ser una URL absoluta o relativa.
• extras: Un objeto opcional de tipo NavigationBehaviorOptions que puede incluir parámetros adicionales como skipLocationChange, replaceUrl, etc.

Ejemplo:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  constructor(private router: Router) {}

  goToHome() {
    this.router.navigateByUrl('/home');
  }
}

En este ejemplo, el método navigateByUrl() se utiliza para navegar directamente a la URL /home.

Eventos del Router

El router emite una serie de eventos durante el ciclo de vida de la navegación, lo que permite a los desarrolladores responder a diferentes etapas del proceso de enrutamiento.

Eventos principales

• NavigationStart: Emitido cuando una navegación comienza.
• NavigationEnd: Emitido cuando una navegación termina con éxito.
• NavigationCancel: Emitido cuando una navegación es cancelada.
• NavigationError: Emitido cuando una navegación falla.
• RoutesRecognized: Emitido cuando las rutas han sido reconocidas.

Ejemplo de suscripción a eventos:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        console.log('Navigation ended!', event);
      }
    });
  }
}

En este ejemplo, el componente se suscribe a los eventos del router (que es un Observable<Event>) y registra un mensaje en la consola cada vez que una navegación termina con éxito.