Tutorial Angular: 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, debes usar el módulo RouterModule del paquete @angular/router. Los parámetros de rutas permiten que las rutas sean dinámicas y flexibles, lo que facilita la administración de rutas basadas en valores específicos como identificadores o nombres.

En el archivo de configuración de rutas (app-routing.module.ts o el de tu elección), tu array de rutas debería incluir un objeto de ruta que contenga una propiedad path con los segmentos de ruta y los parámetros denotados por los dos puntos (:). 

Si estás trabajando en una aplicación más pequeña o un componente independiente (standalone) que no requiere un archivo de enrutamiento específico, puedes configurar las rutas directamente en el archivo principal de la aplicación (generalmente app.module.ts) o en el propio componente standalone. Independientemente de dónde definas tus rutas, la estructura básica será la misma.

Por ejemplo:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DetalleProductoComponent } from './detalle-producto/detalle-producto.component';

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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:

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.

Existen varias maneras de acceder a los parámetros de una ruta en Angular, a través de ActivatedRoute. Cada método tiene sus propias características y casos de uso. Además, con las versiones más recientes de Angular, podemos utilizar la función inject() como una alternativa a la inyección de dependencias en el constructor.

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.

Para comenzar a usar ActivatedRoute, primero debes inyectarlo en el constructor del componente donde necesitas acceder a los parámetros de la ruta. 

Ejemplo usando el constructor:

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

@Component({
  selector: 'app-detalle-producto',
  templateUrl: './detalle-producto.component.html',
  styleUrls: ['./detalle-producto.component.css']
})
export class DetalleProductoComponent implements OnInit {
  id: string | null = null;

  constructor(private route: ActivatedRoute) { }

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

En este ejemplo, ActivatedRoute es inyectado en el constructor y luego utilizado en el hook ngOnInit para suscribirse a los cambios en los parámetros de la ruta. La propiedad params de ActivatedRoute es un observable que contiene los parámetros de la URL.

Ejemplo usando inject():

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

@Component({
  selector: 'app-detalle-producto',
  templateUrl: './detalle-producto.component.html',
  styleUrls: ['./detalle-producto.component.css']
})
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.

Ejemplo usando el constructor:

export class DetalleProductoComponent implements OnInit {
  id!: string;

  constructor(private route: ActivatedRoute) { }

  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.

Ejemplo usando inject():

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

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.

Ejemplo usando el constructor:

export class DetalleProductoComponent implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) { }

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

El snapshot permite acceder a los parámetros directamente y es útil cuando se sabe de antemano que los parámetros no cambiarán durante la vida del componente.

Ejemplo usando inject():

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 una característica más reciente de Angular que proporciona una forma alternativa y más flexible de inyectar dependencias, incluyendo ActivatedRoute. Esta característica es parte del enfoque de Angular hacia una programación más funcional y menos dependiente de clases.

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, puede hacer 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 o hooks personalizados.
4. Compatibilidad con componentes independientes (standalone): Facilita la configuración de componentes independientes 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',
  standalone: true,
  template: '<h1>ID del producto: {{productId}}</h1>'
})
export class DetalleProductoComponent {
  private route = inject(ActivatedRoute);
  productId = this.route.snapshot.paramMap.get('id');
}

Hooks personalizados

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

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();
}