El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com treballar amb paràmetres de ruta a 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.

Objectius

Comprendre 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 opcionals.

Què són els paràmetres de ruta?

Els paràmetres de ruta són segments de l'URL que poden contenir informació dinàmica. 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.

Definir rutes amb paràmetres

Per definir una ruta amb paràmetres, utilitzem la sintaxi :paramName en la configuració de rutes. A continuació, es mostra un exemple de com definir una ruta amb un paràmetre anomenat id:

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 aquest exemple, la ruta product/:id indica que qualsevol URL que coincideixi amb product/alguna-cosa carregarà el ProductDetailComponent.

Accedir als paràmetres de ruta

Per accedir als paràmetres de ruta des d'un component, utilitzem el servei ActivatedRoute. Aquest servei ens permet accedir als paràmetres de la ruta actual. A continuació, es mostra un exemple de com accedir al paràmetre id en el ProductDetailComponent:

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 aquest exemple, utilitzem el mètode paramMap del servei ActivatedRoute per obtenir els paràmetres de la ruta. El mètode get ens permet accedir al valor del paràmetre id.

Paràmetres de ruta opcionals

Els paràmetres de ruta opcionals es poden definir utilitzant la sintaxi ;paramName=value. A continuació, es mostra un exemple de com definir i accedir a paràmetres de ruta opcionals:

Definir rutes amb paràmetres opcionals

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

Accedir als paràmetres opcionals

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;
  productColor: string;

  constructor(private route: ActivatedRoute) { }

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

En aquest exemple, accedim als paràmetres opcionals de la mateixa manera que als paràmetres obligatoris.

Exercicis pràctics

Exercici 1: Crear una ruta amb paràmetres

Defineix una nova ruta en el teu AppRoutingModule que inclogui un paràmetre anomenat category.
Crea un component anomenat CategoryComponent que mostri el valor del paràmetre category en la seva plantilla.

Solució

Definir la ruta

const routes: Routes = [
  { path: 'category/:category', component: CategoryComponent }
];

Crear el component

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

@Component({
  selector: 'app-category',
  template: '<h1>Category: {{ category }}</h1>',
  styleUrls: ['./category.component.css']
})
export class CategoryComponent implements OnInit {
  category: string;

  constructor(private route: ActivatedRoute) { }

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

Resum

En aquesta secció, hem après què són els paràmetres de ruta i com utilitzar-los a Angular. Hem vist com definir rutes amb paràmetres, accedir als paràmetres des dels components i treballar amb paràmetres opcionals. Els paràmetres de ruta són una eina poderosa per crear aplicacions dinàmiques i interactives.

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

Paràmetres de ruta

Objectius

Què són els paràmetres de ruta?

Definir rutes amb paràmetres

Accedir als paràmetres de ruta

Paràmetres de ruta opcionals

Definir rutes amb paràmetres opcionals

Accedir als paràmetres opcionals

Exercicis pràctics

Exercici 1: Crear una ruta amb paràmetres

Solució

Definir la ruta

Crear el component

Resum

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

Mòdul 4: Serveis i injecció de dependències

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques