[MUSIC]
Utilizzando il router angolare, abbiamo già imparato come possiamo navigare
da una vista all'altra utilizzando la direttiva collegamento router per specificare il collegamento.
E anche il modulo router, che ci consente con le specifiche del percorso, di
navigare alle viste dei diversi componenti.
Ora, prendiamo un esempio del componente dishdetail.
Finora, il componente dishdetail ha lavorato ricevendo i dettagli
del piatto specifico che deve visualizzare dal componente menu.
Ma questo è stato facilitato perché il componente dishdetail aveva una proprietà
che stava inviando il valore.
E poi stavamo usando il decoratore di input per
la variabile all'interno del componente dishdetail per ottenere quel valore che
veniva passato dal componente del menu.
Ora, quando questi componenti vengono instradati utilizzando un router,
questa connessione tra i componenti non esiste più.
Quindi abbiamo bisogno di sfruttare il router angolare per essere in grado di passare
le informazioni da un componente all'altro componente.
E questo di solito è fatto sotto forma di parametri.
Parametri che possono essere specificati come parametri di percorso,
come impareremo un po 'più tardi, o parametri di query.
Quindi, per il router angolare, quello che abbiamo imparato
finora è che i percorsi sono tutti specificati come URL.
Supponiamo di avere la necessità di passare un valore di parametro da un componente a
un altro componente.
Allora come lo facciamo?
Ora, l'unico modo in cui si sta comunicando tra i componenti
è utilizzando il collegamento del router.
e/o
utilizzare il modulo router per eseguire la navigazione da un componente a un altro componente.
Ora, questo è dove la possibilità di specificare i valori dei parametri all'interno dell'URL per
un componente, il percorso per un componente, ci permette di passare queste informazioni.
Quindi, per esempio, se vogliamo essere in grado di visualizzare un piatto
con un id 42 nel componente dishdetail.
Se avessimo la possibilità di specificare qualcosa come/dishdetail/42.
E poi lascia che il dishdetail raccolga direttamente il numero 42 dall'URL.
Poi abbiamo facilitato un meccanismo per trasmettere queste informazioni
un componente ad un altro componente quando stiamo navigando verso l'altro componente.
Questo è ciò che nel modulo Angular Router viene definito un parametro di route.
Come funziona un parametro di route?
Pertanto, quando si specifica un parametro route nella definizione del percorso,
questo parametro route viene specificato utilizzando un token.
Quindi, quando si specifica il percorso nella specifica del percorso per
i percorsi, è necessario specificare un percorso come questo.
Quindi,
dove id diventa il token che porta il
parametro route al componente specifico.
Il componente dishdetail in questo esempio.
In questo modo, è possibile specificare un parametro route nel percorso.
E poi da un'altra posizione, puoi passare il parametro
al particolare componente che ha bisogno di questo parametro.
Il componente dishdetail in questo esempio.
Ora, la prossima domanda importante che sorgerà nella tua mente è,
come passiamo questo parametro di percorso?
Ora, quando ci penserai, quando navighi attraverso il componente dishdetail.
Stai entrando da un altro componente facendo clic su un link o usando
qualcosa chiamato la funzione di navigazione come il modulo di percorso fornisce per noi.
Esamineremo entrambi i modi di navigare a un particolare componente.
Ora, se hai bisogno di specificare il parametro route, quando specifichi il link,
ricorda che stavamo specificando il link usando la
direttiva del collegamento del router nei nostri file di modello.
Ora, se hai intenzione di specificare questo nei file di modello,
allora il collegamento del router prende anche un array come vediamo.
Un array di parametri di collegamento,
in cui è possibile specificare esplicitamente il parametro che viene trasmesso.
Quindi, per esempio, in questo esempio che vedete qui, stiamo specificando un.
E poi si sta facendo un ngFor.
Quindi stai eseguendo il ciclo attraverso un insieme di oggetti JavaScript in
un array di oggetti JavaScript.
Quindi, quando si specifica il collegamento del router.
Quindi all'interno di lì, puoi specificare il collegamento del router.
Ma ora, circondato da parentesi quadre.
E questo prenderà in un valore come questo ha un array di parametri di collegamento.
Quindi qui, puoi specificare diverse parti del parametro di collegamento.
E Angular Router li unirà insieme per formare l'URL effettivo.
Quindi qui, puoi vedere che la prima parte del parametro link è specificata
come una stringa qui, quindi /dishdetail qui.
Ma la seconda parte è specificata come un valore che si ottiene
dal piatto.
Qual è il piatto, l'oggetto JavaScript dalla matrice di oggetti JavaScript qui.
Quindi ogni piatto porterà un dish.id.
Quindi il dish.id può essere specificato come
uno dei valori all'interno di questo array di parametri di collegamento qui.
Quindi, quando clicchi su questo, per il piatto specifico,
questo piatto.id sarà sostituito dall'id specifico per il piatto.
Quindi, ad esempio, se l'id è 42, allora questo sarà sostituito da 42.
Quindi, quando il router angolare riceve questo collegamento router,
allora costruirà l'URL come/dishdetail/42.
Il 42 è il valore del dish.id a questo punto.
Quindi è così che puoi passare il parametro.
La seconda parte della domanda, ovviamente,
è in che modo il componente recupera questo valore dal parametro link? Di
cui parleremo nella prossima diapositiva.
Un altro modo che è possibile causare questa navigazione all'altro componente
è anche quello di utilizzare un metodo chiamato navigate fornito dal modulo router.
Quindi puoi dire, questo.router.navigate.
Quindi questo può essere incluso nel tuo codice TypeScript o nel
tuo codice JavaScript per causare automaticamente la navigazione verso l'altro.
Quindi questo potrebbe essere incluso all'interno di un metodo che
includi nel codice TypeScript del tuo componente.
E questo può essere invocato dal tuo modello.
Dì, ad esempio, facendo clic su un link lì.
Quindi dentro di lì nel codice, puoi includere un'istruzione come questa,
this.router.navigate.
E questo metodo naviga prende lo stesso array di parametri di collegamento
come il valore del parametro.
Quindi questo consentirà anche di fornire queste informazioni al router angolare in modo
che possa navigare verso l'altro componente.
Ora, andiamo dall'altra parte di questa equazione.
In che modo un componente, come il componente dishdetail in questo esempio,
recupera questo valore specificato come token nel collegamento URL lì?
Ora, questo è dove la libreria Angular Router fornisce
un servizio chiamato come il servizio ActivatedRoute.
Questo servizio ActivatedRoute può essere sfruttato per essere in grado di recuperare
questi valori.
Ora, in particolare, per facilitare il recupero di questo parametro,
il servizio ActivatedRoute fornisce tre cose diverse.
Ad esempio, fornisce questo metodo per recuperare l'URL.
Che è un osservabile del percorso.
Che è rappresentato come una matrice di stringhe per ogni percorso di percorso.
Hai incontrato questa parola osservabile qui.
Per il momento, aggrappati a quella parola.
Torneremo, guarderemo cosa c'è un osservabile nel prossimo modulo.
Ma per il momento, quello che abbiamo capito è che questo
servizio ActivatedRoute fornisce questo osservabile.
Allo stesso modo, il servizio ActivatedRoute fornisce anche un altro osservabile chiamato parametri.
Questo parametro osservabile rende disponibili a un componente
i valori dei parametri che vengono passati come parametro route.
Quindi questo parametro osservabile è quello che useremo per
recuperare questo valore all'interno del componente dishdetail.
Vedrai il metodo esatto per farlo
nell'esercizio che segue questa lezione.
Allo stesso modo, è anche possibile passare i parametri di query a un altro componente.
Ora, non abbiamo intenzione di trattare con un esempio dei parametri di query in questo momento.
Ma in seguito, potremmo incontrare un esempio di come è possibile passare
i parametri di query attraverso il servizio ActivatedRoute a un altro componente.
Con questa comprensione, andiamo avanti al prossimo esercizio.
Continueremo a sviluppare l'applicazione a pagina singola.
E poi abilitare l'uso di un parametro route per passare
l'id di un piatto al componente dishdetail. In
modo che il componente dishdetail, a sua volta, possa utilizzare questo id per interrogare il servizio piatto.
Per ottenere i dettagli di quel piatto specifico che
dovrebbe mostrare all'interno della sua vista.
[ MUSIC]