Router en Angular

flowchart TD
    URL["Cambio de URL<br/>click, navigate, browser"] --> Start[NavigationStart]
    Start --> Recogn["RoutesRecognized<br/>match config"]
    Recogn --> Guard1{"canMatch<br/>filtra ruta"}
    Guard1 -->|true| Resolve["Resolve guards<br/>fetch data antes"]
    Guard1 -->|false| Cancel[NavigationCancel]
    Resolve --> Guard2{"canActivate<br/>permite entrar"}
    Guard2 -->|true| Guard3{canActivateChild}
    Guard2 -->|false| Cancel
    Guard3 -->|true| Guard4{"canDeactivate<br/>componente saliente"}
    Guard4 -->|true| Render["Activación<br/>destruye salientes<br/>monta entrantes"]
    Render --> End[NavigationEnd]
    Guard4 -->|false| Cancel
    Cancel --> Original[Mantiene URL anterior]
    End --> Reuse["RouteReuseStrategy<br/>cachea componentes opcional"]
    style URL fill:#fff3e0,stroke:#ef6c00
    style Render fill:#e8f5e9,stroke:#2e7d32
    style Cancel fill:#ffebee,stroke:#c62828

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.

En Angular 21, el router se configura mediante provideRouter() en el archivo app.config.ts, siguiendo el enfoque standalone que es el estándar desde Angular 17+.

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 paquete @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

En Angular 21, la forma recomendada de inyectar el servicio Router es mediante la función inject(). También es posible inyectarlo por constructor, aunque este enfoque se considera más tradicional.

Inyección con inject() (recomendado)

La función inject() permite inyectar servicios de forma declarativa como propiedades de clase, sin necesidad de usar el constructor. Es la forma recomendada en Angular 21 por su concisión y compatibilidad con componentes standalone, guards funcionales y funciones de fábrica.

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

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="navigateToHome()">Ir al inicio</button>
  `
})
export class MyComponent {
  private router = inject(Router);

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

Inyección a través del constructor (enfoque clásico)

La inyección por constructor sigue funcionando en Angular 21, aunque es más verbosa. Se utiliza en aplicaciones existentes que aún mantienen este patrón.

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

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="navigateToHome()">Ir al inicio</button>
  `
})
export class MyComponent {
  constructor(private router: 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, inject } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="goToUserProfile('abc123')">Ver perfil</button>
  `
})
export class MyComponent {
  private router = inject(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, inject } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="goToHome()">Ir al inicio</button>
  `
})
export class MyComponent {
  private router = inject(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, inject } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-my-component',
  template: `<router-outlet></router-outlet>`
})
export class MyComponent implements OnInit {
  private router = inject(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.