En aquest tema, aprendrem com treballar amb paràmetres de ruta en Angular. Els paràmetres de ruta són una manera de passar informació a través de l'URL, la qual cosa permet que les aplicacions Angular siguin més dinàmiques i interactives.

• Entendre què són els paràmetres de ruta.
• Aprendre a definir rutes amb paràmetres.
• Accedir als paràmetres de ruta des dels components.
• Utilitzar paràmetres de ruta per a la navegació dinàmica.

Els paràmetres de ruta són segments de l'URL que poden contenir informació variable. Per exemple, en una aplicació de comerç electrònic, podríem tenir una ruta per a la pàgina de detall d'un producte que inclogui l'ID del producte com a paràmetre de ruta.

Exemple d'URL amb paràmetre de ruta:

En aquest cas, 123 és un paràmetre de ruta que representa l'ID del producte.

Per definir una ruta amb paràmetres en Angular, utilitzem la sintaxi :paramName en la configuració de rutes.

Exemple de configuració de rutes amb paràmetres:

En aquest exemple, hem definit una ruta product/:id on :id és un paràmetre de ruta.

Per accedir als paràmetres de ruta des d'un component, utilitzem el servei ActivatedRoute d'Angular.

Exemple d'accés als paràmetres de ruta:

En aquest exemple, utilitzem this.route.snapshot.paramMap.get('id') per obtenir el valor del paràmetre id de la ruta.

Podem utilitzar el servei Router per navegar dinàmicament a una ruta amb paràmetres.

Exemple de navegació dinàmica:

En aquest exemple, utilitzem this.router.navigate(['/product', productId]) per navegar a la ruta product/:id amb el valor del paràmetre productId.

Crear una aplicació Angular que mostri una llista de productes i permeti veure els detalls de cada producte utilitzant paràmetres de ruta.

1. Crear un component de llista de productes:

   ng generate component product-list
   

2. Crear un component de detall de producte:

   ng generate component product-detail
   

3. Definir les rutes 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: 'products', component: ProductListComponent },
     { path: 'product/:id', component: ProductDetailComponent },
     { path: '', redirectTo: '/products', pathMatch: 'full' }
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }
   

4. Implementar la lògica per a la llista de productes en product-list.component.ts:

   import { Component } from '@angular/core';
   import { Router } from '@angular/router';
   
   @Component({
     selector: 'app-product-list',
     templateUrl: './product-list.component.html',
     styleUrls: ['./product-list.component.css']
   })
   export class ProductListComponent {
     products = [
       { id: '1', name: 'Product 1' },
       { id: '2', name: 'Product 2' },
       { id: '3', name: 'Product 3' }
     ];
   
     constructor(private router: Router) { }
   
     viewProduct(productId: string): void {
       this.router.navigate(['/product', productId]);
     }
   }
   

5. Implementar la lògica per al detall de producte en product-detail.component.ts:

   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.productId = this.route.snapshot.paramMap.get('id');
     }
   }
   

6. Crear les plantilles HTML per als components:

   product-list.component.html:

   <h2>Product List</h2>
   <ul>
     <li *ngFor="let product of products">
       {{ product.name }}
       <button (click)="viewProduct(product.id)">View Details</button>
     </li>
   </ul>
   

   product-detail.component.html:

   <h2>Product Detail</h2>
   <p>Product ID: {{ productId }}</p>
   

Si has seguit els passos anteriors, hauràs creat una aplicació Angular que mostra una llista de productes i permet veure els detalls de cada producte utilitzant paràmetres de ruta.

En aquest tema, hem après què són els paràmetres de ruta i com utilitzar-los en Angular per crear aplicacions dinàmiques. Hem vist com definir rutes amb paràmetres, accedir als paràmetres de ruta des dels components i utilitzar paràmetres de ruta per a la navegació dinàmica. També hem realitzat un exercici pràctic per reforçar els conceptes apresos.

En el següent tema, explorarem les rutes fills, que ens permetran crear estructures de navegació més complexes dins de les nostres aplicacions Angular.