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
Garantire la provenienza e l'integrità degli artefatti prodotti su GitHub
Ottenere un token di accesso per una GitHub App
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Sfruttare al massimo i topic space di Event Grid MQTT
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Ottimizzazione dei block template in Angular 17
Generare velocemente pagine CRUD in Blazor con QuickGrid
Criptare la comunicazione con mTLS in Azure Container Apps
Filtering sulle colonne in una QuickGrid di Blazor
Miglioramenti nell'accessibilità con Angular CDK
Utilizzare i primary constructor di C# per inizializzare le proprietà
Creare una libreria CSS universale: Cards