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
Gestire i dati con Azure Cosmos DB Data Explorer
Anonimizzare i dati sensibili nei log di Azure Front Door
Bloccare l'esecuzione di un pod in mancanza di un'artifact attestation di GitHub
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Ordine e importanza per @layer in CSS
Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
Ottimizzare le pull con Artifact Cache di Azure Container Registry
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Configurare e gestire sidecar container in Azure App Service
Utilizzare QuickGrid di Blazor con Entity Framework
Utilizzare Azure AI Studio per testare i modelli AI
Utilizzare Copilot con Azure Cosmos DB