Imparerai come configurare correttamente la navigazione all'interno della tua applicazione Angular e come trasferire dati tra componenti utilizzando l'URL.

Abbiamo già due route configurate:

• / — mostra l'elenco di tutte le attività;

• /task/:id — visualizza i dettagli di una specifica attività tramite il suo ID.

Il nostro obiettivo ora è fare in modo che, quando l'utente clicca un pulsante all'interno di una scheda attività, l'applicazione navighi verso una pagina di dettagli. Il TaskDetailsComponent recupererà quindi l'ID dell'attività dall'URL e lo utilizzerà per ottenere tutti i dati dell'attività.

Come interagiscono i componenti

Definiamo come funzionerà questa interazione di routing.

Aggiungeremo un pulsante all'interno di TaskComponent. Quando viene cliccato, il componente emetterà un evento al componente genitore (TaskListComponent). Il genitore gestirà la navigazione effettiva aggiornando l'URL, il che farà sì che Angular carichi TaskDetailsComponent per il task selezionato.

Perché non effettuare il routing direttamente da TaskComponent?

Se in futuro volessimo riutilizzare TaskComponent in un altro contesto (ad esempio, in una modale o in una lista diversa), non vorremmo che fosse legato alla logica di routing. Invece, dovrebbe semplicemente notificare al genitore che è richiesta un'azione di navigazione.

Questo approccio è più facile da testare e leggere, mantiene la logica di routing centralizzata e garantisce che TaskComponent rimanga pulito e focalizzato sulle sue responsabilità.

Implementazione di TaskComponent

Il compito principale di TaskComponent è emettere eventi verso il suo genitore. Aggiungeremo un pulsante al template che richiama navigateToTask(), il quale emetterà l'evento.

Quando l'utente clicca sul pulsante info, il metodo navigateToTask() emette l'ID del task. Questo evento viene intercettato dal componente genitore (TaskListComponent), che poi gestisce la navigazione utilizzando il router di Angular.

Implementazione di TaskListComponent

Questo componente è responsabile della navigazione alla pagina dei dettagli del task.

Per fare ciò, utilizziamo il servizio Router integrato di Angular, che ci permette di cambiare programmaticamente l'URL e caricare il componente appropriato in base alla rotta.

Abbiamo aggiunto il servizio Router nel costruttore. Angular fornisce automaticamente questo servizio durante la creazione del componente, quindi non è necessaria alcuna configurazione aggiuntiva.

Abbiamo inoltre impostato un listener per l'evento (onNavigate), che attiva il metodo navigateToTask() .

Quando il metodo viene chiamato (ad esempio, quando l'utente clicca sul pulsante info), costruisce la rotta /task/3, e il router aggiorna l'URL e carica il TaskDetailsComponent.

Recupero di un Task tramite ID in TaskDetailsComponent

Quando l'utente naviga alla rotta /task/:id, Angular carica il TaskDetailsComponent. Questo componente si occupa di:

• Ottenere l'ID dall'URL;

• Trovare il task corrispondente tramite il suo ID;

• Visualizzare i dettagli del task sullo schermo.

Ecco come funziona:

Spiegazione:

Il servizio ActivatedRoute consente di accedere ai parametri della rotta corrente.

• Usiamo snapshot.paramMap.get('id') per estrarre il valore id dall'URL;

• Poi lo convertiamo in un numero e lo passiamo a getTaskById(id) del TaskService per recuperare il task;

• Il metodo goToHomePage() naviga nuovamente alla pagina principale dove viene visualizzato l'elenco completo dei task.

Quindi, utilizzando Angular Router, abbiamo configurato con successo la navigazione tra componenti e il passaggio di dati tramite un parametro nell'URL. Il TaskListComponent gestisce la navigazione tramite l'ID del task, mentre TaskDetailsComponent legge l'ID dalla rotta e carica il task corrispondente.