Cómo pasar parámetros por rutas – Curso aprende Angular desde cero

En este artículo, aprenderás cómo pasar parámetros por rutas en Angular. Este es un concepto fundamental en el desarrollo de aplicaciones web con este framework, ya que te permitirá enviar información entre distintas vistas de manera sencilla y eficiente.

¿Qué son las rutas en Angular?

En Angular, las rutas son utilizadas para navegar entre distintas vistas de una aplicación web. Cada ruta puede tener parámetros que se utilizan para enviar información específica a una vista, lo que resulta muy útil para personalizar el contenido que se muestra al usuario.

Cómo pasar parámetros por rutas

Para pasar parámetros por rutas en Angular, se utiliza la propiedad params del módulo @angular/router. Aquí te mostramos un ejemplo:

  
    import { RouterModule, Routes } from '@angular/router';

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

En el ejemplo anterior, la ruta /producto/:id tiene un parámetro llamado id, el cual puede ser utilizado para mostrar la información de un producto específico en la vista ProductoComponent.

Capturar parámetros en el componente

Una vez que has definido la ruta con parámetros, puedes capturar dichos parámetros en el componente correspondiente utilizando el módulo ActivatedRoute de @angular/router. Aquí te mostramos un ejemplo de cómo hacerlo:

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

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

      constructor(private route: ActivatedRoute) { }

      ngOnInit(): void {
        this.route.params.subscribe(params => {
          this.id = params['id'];
          // Utilizar el parámetro id para mostrar la información del producto
        });
      }
    }
  

Conclusión

En resumen, saber cómo pasar parámetros por rutas en Angular es fundamental para el desarrollo de aplicaciones web con este framework. Utilizando la propiedad params del módulo @angular/router y el módulo ActivatedRoute, podrás enviar información entre distintas vistas de manera sencilla y eficiente.

Esperamos que este artículo te haya ayudado a comprender cómo pasar parámetros por rutas en Angular. ¡Sigue aprendiendo y explorando las posibilidades que este framework tiene para ofrecerte!