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
Inizializzare i container in Azure Container Apps
Evitare la script injection nelle GitHub Actions
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Implementare l'infinite scroll con QuickGrid in Blazor Server
Utilizzare il trigger SQL con le Azure Function
Reactive form tipizzati con modellazione del FormBuilder in Angular
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Usare lo spread operator con i collection initializer in C#
Aggiungere interattività lato server in Blazor 8
Creazione di componenti personalizzati in React.js con Tailwind CSS
Generare file PDF da Blazor WebAssembly con iText
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)