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

Parámetros de Ruta

Siguiente ►
►

Introducción

En aplicaciones Angular, los parámetros de ruta permiten pasar información a través de la URL. Esto es útil para crear rutas dinámicas que pueden cambiar en función de los datos proporcionados. En esta sección, aprenderemos cómo configurar y utilizar parámetros de ruta en Angular.

Conceptos Clave

  1. Rutas Dinámicas: Rutas que pueden cambiar en función de los parámetros proporcionados en la URL.
  2. Parámetros de Ruta: Valores que se pasan a través de la URL y que pueden ser utilizados dentro de los componentes.
  3. ActivatedRoute: Servicio de Angular que proporciona acceso a la información sobre una ruta asociada a un componente cargado.

Configuración de Parámetros de Ruta

Para configurar parámetros de ruta, necesitamos definirlos en el archivo de configuración de rutas (app-routing.module.ts). Aquí hay un ejemplo básico:

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

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

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

En este ejemplo, :id es un parámetro de ruta que puede ser accedido dentro del ProductDetailComponent.

Accediendo a Parámetros de Ruta

Para acceder a los parámetros de ruta dentro de un componente, utilizamos el servicio ActivatedRoute. Aquí hay un ejemplo de cómo hacerlo:

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, paramMap es un observable que contiene los parámetros de la ruta. Utilizamos el método get para obtener el valor del parámetro id.

Ejemplo Práctico

Supongamos que tenemos una lista de productos y queremos mostrar los detalles de un producto específico cuando el usuario hace clic en él. Aquí está el flujo completo:

  1. Configuración de Rutas

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

  1. Componente de Lista de Productos

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

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

  constructor(private router: Router) { }

  viewProduct(id: string): void {
    this.router.navigate(['/product', id]);
  }
}

  1. Componente de Detalle de Producto

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

@Component({
  selector: 'app-product-detail',
  template: `
    <h2>Product Details</h2>
    <p>Product ID: {{ productId }}</p>
  `
})
export class ProductDetailComponent implements OnInit {
  productId: string;

  constructor(private route: ActivatedRoute) { }

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

Ejercicio Práctico

Ejercicio

  1. Configura una nueva ruta en tu aplicación Angular que acepte un parámetro de ruta llamado name.
  2. Crea un componente que muestre el valor del parámetro name en su plantilla.
  3. Añade un enlace en otro componente que navegue a esta nueva ruta pasando un valor para el parámetro name.

Solución

1. Configuración de la Ruta

const routes: Routes = [
  { path: 'greet/:name', component: GreetComponent }
];

2. Componente Greet

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

@Component({
  selector: 'app-greet',
  template: `
    <h2>Hello, {{ name }}!</h2>
  `
})
export class GreetComponent implements OnInit {
  name: string;

  constructor(private route: ActivatedRoute) { }

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

3. Enlace en Otro Componente

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

@Component({
  selector: 'app-home',
  template: `
    <button (click)="greetUser('John')">Greet John</button>
  `
})
export class HomeComponent {
  constructor(private router: Router) { }

  greetUser(name: string): void {
    this.router.navigate(['/greet', name]);
  }
}

Conclusión

En esta sección, hemos aprendido cómo configurar y utilizar parámetros de ruta en Angular. Los parámetros de ruta son esenciales para crear aplicaciones dinámicas y flexibles. Ahora estás listo para pasar al siguiente tema, donde exploraremos las rutas hijas y cómo estructurar aplicaciones más complejas.

◄ Anterior
◄
Siguiente ►
►

Curso de Angular 2+

Módulo 1: Introducción a Angular

Módulo 2: Conceptos Básicos de TypeScript

Módulo 3: Componentes y Plantillas

Módulo 4: Directivas y Pipes

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

Módulo 6: Enrutamiento y Navegación

Módulo 7: Formularios en Angular

Módulo 8: Cliente HTTP y Observables

Módulo 9: Gestión de Estado

Módulo 10: Pruebas en Angular

Módulo 11: Temas Avanzados

Módulo 12: Despliegue y Mejores Prácticas

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