Parámetros en rutas con ActivatedRoute

Los parámetros en rutas son partes variables dentro de las URLs. Estas partes variables, o parámetros, permiten que una misma ruta pueda manejar diferentes datos dependiendo del valor del parámetro. Por ejemplo:

• Una ruta de perfil de usuario: /usuario/:nombre
• Una ruta de detalle de producto: /producto/:id
• Una ruta de categoría y subcategoría: /categoria/:catId/subcategoria/:subId

En estos ejemplos, los segmentos precedidos por : son parámetros que pueden cambiar dinámicamente.

Configuración de rutas con parámetros

Para configurar rutas con parámetros en Angular 21, se definen en el archivo app.routes.ts y se registran con provideRouter() en app.config.ts. Los parámetros de rutas permiten que las rutas sean dinámicas y flexibles.

En el archivo de configuración de rutas (app.routes.ts), tu array de rutas incluye objetos de ruta con una propiedad path que contiene los segmentos de ruta y los parámetros denotados por los dos puntos (:).

Por ejemplo:

// app.routes.ts
import { Routes } from '@angular/router';
import { DetalleProductoComponent } from './detalle-producto/detalle-producto.component';

export const routes: Routes = [
  { path: 'producto/:id', component: DetalleProductoComponent }
];

En este ejemplo, :id es un parámetro de ruta. La ruta producto/:id permitirá la navegación a DetalleProductoComponent con un parámetro dinámico id.

Puedes definir múltiples parámetros en una ruta. Por ejemplo:

export const routes: Routes = [
  { path: 'producto/:categoria/:id', component: DetalleProductoComponent }
];

Aquí la ruta producto/:categoria/:id define dos parámetros de ruta: categoria e id.

Acceso a los parámetros utilizando ActivatedRoute

Para acceder a los parámetros de una ruta en Angular, se utiliza el servicio ActivatedRoute, que proporciona acceso a los datos de la ruta asociada con el componente que se está instanciando actualmente. Este servicio permite suscribirse a los cambios en la ruta y acceder a los parámetros de diversas maneras.

En Angular 21, la forma recomendada de inyectar ActivatedRoute es mediante la función inject().

params

El params de ActivatedRoute devuelve un observable que emite un objeto cada vez que los parámetros son emitidos por el router. Este método es útil para suscribirse a los cambios de parámetros y reaccionar ante ellos.

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

@Component({
  selector: 'app-detalle-producto',
  template: `<h1>ID del producto: {{ id }}</h1>`
})
export class DetalleProductoComponent implements OnInit {
  private route = inject(ActivatedRoute);
  id: string | null = null;

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.id = params['id'];
      console.log(this.id);
    });
  }
}

paramMap

Otra manera de acceder a los parámetros es utilizando paramMap, que proporciona métodos de acceso más seguros para los parámetros y soporta mejor los escenarios donde los parámetros son opcionales.

export class DetalleProductoComponent implements OnInit {
  private route = inject(ActivatedRoute);
  id: string | null = null;

  ngOnInit() {
    this.route.paramMap.subscribe(paramMap => {
      this.id = paramMap.get('id');
      console.log(this.id);
    });
  }
}

En este ejemplo, paramMap es un observable que se suscribe en ngOnInit para obtener el objeto paramMap, y el método get se utiliza para recuperar el valor del parámetro id.

snapshot

El snapshot de ActivatedRoute permite acceder de manera estática a los parámetros de la ruta en el momento en que se carga el componente. Este método es útil cuando sabes que los parámetros no cambiarán durante la vida del componente y quieres evitar los costes relacionados con las suscripciones a observables.

export class DetalleProductoComponent implements OnInit {
  private route = inject(ActivatedRoute);
  id: string | null = null;

  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id');
    console.log(this.id);
  }
}

Cada método tiene ventajas dependiendo del caso de uso. params y paramMap son adecuados para manejar cambios dinámicos en los parámetros, mientras que snapshot se adapta bien a situaciones estáticas donde los parámetros no varían.

ActivatedRoute con inject()

La función inject() es la forma recomendada en Angular 21 para inyectar dependencias, incluyendo ActivatedRoute. Proporciona una forma más limpia y funcional de acceder a servicios.

Ventajas de usar inject():

1. Flexibilidad: Permite inyectar dependencias fuera del constructor, lo que puede ser útil en ciertos patrones de diseño.
2. Legibilidad: En componentes con muchas dependencias, hace que el código sea más limpio al evitar constructores largos.
3. Uso en funciones: Permite la inyección de dependencias en funciones utilitarias, guards funcionales y resolvers.
4. Compatibilidad con componentes standalone: Facilita la configuración de componentes standalone sin necesidad de módulos.

Ejemplos de uso

Componentes standalone

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

@Component({
  selector: 'app-detalle-producto',
  template: '<h1>ID del producto: {{productId}}</h1>'
})
export class DetalleProductoComponent {
  private route = inject(ActivatedRoute);
  productId = this.route.snapshot.paramMap.get('id');
}

Funciones utilitarias

import { inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { map } from 'rxjs/operators';

export function useProductId() {
  const route = inject(ActivatedRoute);
  return route.paramMap.pipe(
    map(params => params.get('id'))
  );
}

// Uso en un componente
@Component({...})
export class ProductoComponent {
  productId$ = useProductId();
}