Introducción al parámetro angular con ruta y recarga de componente

En Angular, los parámetros de ruta son una forma de pasar información de una vista a otra a través de la URL. Al agregar parámetros a una ruta, podemos hacer que se cargue un componente específico y también actualizar su contenido cada vez que cambian los valores de estos parámetros.

En esta breve introducción, veremos cómo agregar un parámetro a una ruta en Angular y cómo recargar un componente cuando cambie este parámetro.

Agregando un parámetro a una ruta

Para agregar un parámetro a una ruta, primero debemos definir la ruta en nuestro archivo de enrutado (app-routing.module.ts). Supongamos que tenemos una aplicación de blog y queremos crear una ruta para una página de detalles de publicaciones. Podemos definir una ruta de la siguiente manera:

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

En esta ruta, :id es el parámetro que pasaremos a la vista. La vista en sí se cargará a través del componente PostDetailComponent.

Recargando el componente con cambios de parámetro

Supongamos que queremos actualizar la vista del componente PostDetailComponent cada vez que cambia el valor del parámetro id. Para hacer esto, podemos suscribirnos al parámetro usando ActivatedRoute en el componente.

En el archivo post-detail.component.ts, podemos agregar el siguiente código:

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

@Component({
  selector: 'app-post-detail',
  templateUrl: './post-detail.component.html',
  styleUrls: ['./post-detail.component.css']
})
export class PostDetailComponent implements OnInit {
  postId: number;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe( params => {
      this.postId = params.id;
      // Cargar los detalles de la publicación con el ID proporcionado
    });
  }
}

Aquí, el constructor del componente inyecta el servicio de ActivatedRoute. En el método ngOnInit(), nos suscribimos al parámetro id de la ruta y asignamos su valor a la propiedad postId del componente. Ahora podemos usar postId para cargar los detalles de la publicación correspondiente.

Conclusión

Con los parámetros de ruta en Angular, podemos crear vistas altamente dinámicas que se actualizan automáticamente cada vez que cambia el valor de un parámetro. Al suscribirnos a los parámetros de la ruta en el componente, podemos controlar exactamente cómo se carga y se recarga el contenido de nuestras vistas. ¡Feliz codificación!