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
Ottimizzare le pull con Artifact Cache di Azure Container Registry
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
Effettuare il binding di date in Blazor
Creazione di componenti personalizzati in React.js con Tailwind CSS
Usare il colore CSS per migliorare lo stile della pagina
Configurare lo startup di applicazioni server e client con .NET Aspire
Simulare Azure Cosmos DB in locale con Docker
Migliorare la sicurezza dei prompt con Azure AI Studio
Ottimizzare le performance usando Span<T> e il metodo Split
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Evitare il flickering dei componenti nel prerender di Blazor 8
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8