Uso de ActivatedRoute para extraer parámetros de ruta en Angular

En el desarrollo de aplicaciones Angular, los parámetros de ruta a menudo juegan un papel crucial. Estos parámetros permiten que los datos sean pasados entre los diferentes componentes de una aplicación. La pregunta planteada es, ¿qué servicio se puede utilizar para extraer parámetros de ruta dentro de un componente? La respuesta es ActivatedRoute.

ActivatedRoute es un servicio en el framework Angular que contiene información acerca de una ruta asociada a un componente que se ha cargado en una pantalla. Este servicio permite manejar y extraer parámetros de la ruta actual.

Es posible conseguir estos parámetros utilizando ActivatedRoute de dos formas:

• Snapshot - Esta es una técnica sincrónica y se utiliza cuando se sabe que los valores de los parámetros no cambiarán durante la vida del componente.

constructor(private route: ActivatedRoute) { }
ngOnInit() {
  let id = this.route.snapshot.paramMap.get('id');
  console.log(id);
}

• Observable - Esta es una técnica asíncrona y se utiliza cuando los valores de los parámetros pueden cambiar mientras el componente está activo. Permite suscribirse a los cambios del parámetro.

constructor(private route: ActivatedRoute) { }
ngOnInit() {
  this.route.paramMap.subscribe(params => {
    let id = params.get('id');
    console.log(id);
  });
}

Es importante notar que aunque Router y Route son también servicios en Angular, no proporcionan la funcionalidad de extraer directamente parámetros de ruta dentro de un componente. Router se utiliza para navegar entre rutas y Route se utiliza para definir las rutas. En cambio, CurrentRoute no existe en Angular.

Las buenas prácticas en el uso de ActivatedRoute implican preferir el uso de Observables sobre Snapshots cuando se prevé que los parámetros de ruta puedan cambiar a lo largo del tiempo. Además, es importante recordar desuscribirse de los Observables para evitar pérdidas de memoria.

Así, ActivatedRoute surge como una herramienta esencial en el desarrollo de aplicaciones angular, proporcionando funcionalidad para extraer parámetros de ruta dentro de un componente de forma efectiva.