Negli script #201 e #202 abbiamo visto come passare uno o più parametri a un component durante la fase di navigazione. In questo script vedremo come recuperare questi parametri nel component verso cui navighiamo.
La classe responsabile della lettura dei parametri è ActivatedRoute (contenuta nel modulo @angular/router). Questa classe deve essere iniettata nel component tramite il costruttore e ne va utilizzata la proprietà params che è un observable al quale viene inviato un oggetto con tutti i parametri della pagina. Il prossimo esempio mostra il codice necessario per recuperare un parametro id.
import { ActivatedRoute } from '@angular/router'; @Component({ templateUrl: 'detail.html', }) export class DetailComponent implements OnInit { constructor(private activatedRoute: ActivatedRoute) { } ngOnInit() { this.activatedRoute.params.subscribe(p => { this.id = p['id']; }); } }
Il motivo per cui i parametri vengono inviati tramite un observable è che se da un component decidiamo di navigare verso lo stesso component ma con parametri diversi, Angular non scarica e ricarica il component, ma lo mantiene vivo e invia semplicemente il nuovo parametro all'observable. Sarà compito del nostro codice ricaricare i dati della pagina al variare dei parametri.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Evitare la command injection in un workflow di GitHub
Eseguire attività con Azure Container Jobs
Creazione di componenti personalizzati in React.js con Tailwind CSS
Generare file PDF da Blazor WebAssembly con iText
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Eseguire una query su SQL Azure tramite un workflow di GitHub
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Sfruttare al massimo i topic space di Event Grid MQTT
Utilizzare un service principal per accedere a Azure Container Registry
Evitare il flickering dei componenti nel prerender di Blazor 8
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Eseguire una GroupBy per entity in Entity Framework