El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Parámetros de Ruta

Siguiente ►
►

En esta lección, aprenderemos sobre los parámetros de ruta en Angular, que nos permiten pasar datos a través de la URL y acceder a ellos en nuestros componentes. Los parámetros de ruta son esenciales para crear aplicaciones dinámicas y navegables.

Conceptos Clave

  1. Parámetros de Ruta: Son segmentos de la URL que pueden contener valores dinámicos.
  2. ActivatedRoute: Un servicio de Angular que proporciona acceso a la información sobre una ruta asociada a un componente cargado.
  3. RouterLink: Una directiva que se utiliza para enlazar rutas en las plantillas.

Configuración de Parámetros de Ruta

Para configurar parámetros de ruta, necesitamos definirlos en nuestras rutas en el archivo de configuración de rutas (app-routing.module.ts).

Ejemplo de Configuración de Rutas

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'product/:id', component: ProductDetailComponent }
];

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

En este ejemplo, hemos definido una ruta con un parámetro id para el componente ProductDetailComponent.

Accediendo a Parámetros de Ruta

Para acceder a los parámetros de ruta en un componente, utilizamos el servicio ActivatedRoute.

Ejemplo de Acceso a Parámetros de Ruta

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

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  productId: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      this.productId = params.get('id');
    });
  }
}

En este ejemplo, utilizamos paramMap para obtener el valor del parámetro id y asignarlo a la propiedad productId.

Enlazando Rutas con Parámetros

Para enlazar rutas con parámetros en nuestras plantillas, utilizamos la directiva RouterLink.

Ejemplo de Enlace de Rutas

<a [routerLink]="['/product', product.id]">View Product</a>

En este ejemplo, product.id es el valor dinámico que se pasa como parámetro de ruta.

Ejercicio Práctico

Ejercicio

  1. Objetivo: Crear una aplicación Angular que tenga una lista de productos y una página de detalles del producto. Los detalles del producto deben ser accesibles a través de una URL con un parámetro de ruta.
  2. Pasos:
    • Crear un componente ProductListComponent que muestre una lista de productos.
    • Crear un componente ProductDetailComponent que muestre los detalles de un producto basado en el parámetro de ruta id.
    • Configurar las rutas en app-routing.module.ts.
    • Utilizar RouterLink para enlazar a la página de detalles del producto desde la lista de productos.
    • Utilizar ActivatedRoute para acceder al parámetro id en ProductDetailComponent.

Solución

1. Crear ProductListComponent

import { Component } from '@angular/core';

@Component({
  selector: 'app-product-list',
  template: `
    <h2>Product List</h2>
    <ul>
      <li *ngFor="let product of products">
        <a [routerLink]="['/product', product.id]">{{ product.name }}</a>
      </li>
    </ul>
  `,
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
  products = [
    { id: 1, name: 'Product 1' },
    { id: 2, name: 'Product 2' },
    { id: 3, name: 'Product 3' }
  ];
}

2. Crear ProductDetailComponent

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

@Component({
  selector: 'app-product-detail',
  template: `
    <h2>Product Detail</h2>
    <p>Product ID: {{ productId }}</p>
  `,
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  productId: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      this.productId = params.get('id');
    });
  }
}

3. Configurar Rutas en app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';

const routes: Routes = [
  { path: '', component: ProductListComponent },
  { path: 'product/:id', component: ProductDetailComponent }
];

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

Retroalimentación y Consejos

  • Error Común: Olvidar suscribirse a los parámetros de ruta en ngOnInit. Asegúrate de utilizar this.route.paramMap.subscribe para obtener los parámetros.
  • Consejo: Utiliza paramMap en lugar de snapshot para manejar cambios dinámicos en los parámetros de ruta sin recargar el componente.

Conclusión

En esta lección, hemos aprendido cómo configurar y acceder a parámetros de ruta en Angular. Los parámetros de ruta son fundamentales para crear aplicaciones dinámicas y navegables. En la próxima lección, exploraremos las rutas hijas y cómo estructurar aplicaciones más complejas con múltiples niveles de navegación.

◄ Anterior
◄
Siguiente ►
►

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

Módulo 4: Servicios e Inyección de Dependencias

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados