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
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Routing statico e PreRendering in una Blazor Web App
Reactive form tipizzati con FormBuilder in Angular
Sfruttare lo streaming di una chiamata Http da Blazor
Effettuare il binding di date in Blazor
Eseguire operazioni sui blob con Azure Storage Actions
Gestire domini wildcard in Azure Container Apps
Usare le collection expression per inizializzare una lista di oggetti in C#
Miglioramenti nell'accessibilità con Angular CDK
Usare una container image come runner di GitHub Actions
Usare un KeyedService di default in ASP.NET Core 8
Disabilitare automaticamente un workflow di GitHub