Continuiamo ora a lavorare
sull'applicazione a pagina singola che abbiamo sviluppato nei nostri esercizi.
Finora, abbiamo integrato il componente home,
il componente menu e il componente di contatto nella nostra applicazione a pagina singola.
Il componente dettaglio piatto è attualmente in uso nella parte inferiore del componente menu.
Quindi, quando si fa clic su una qualsiasi delle voci nel menu,
i dettagli del piatto vengono visualizzati proprio sotto nel menu.
Ora, stiamo andando a sfruttare un altro supporto che il modulo router angolare fornisce,
che ci permette di definire un percorso con un parametro incluso nella definizione del percorso.
In questo modo, possiamo passare le informazioni a un altro componente,
e quindi da lì,
visualizzare le informazioni nell'altro componente.
Come funziona?
Impariamo questo facendo questo esercizio.
Quindi, tornando alla nostra applicazione,
in questa applicazione, quando guardi il menu,
quando fai clic su qualsiasi voce del menu,
i dettagli della voce selezionata vengono visualizzati proprio sotto nel menu.
Ora, vorrei separare la vista dei dettagli
di questo particolare piatto nella sua vista separata.
Quando clicco su uno di questi,
voglio essere in grado di visualizzare i dettagli del piatto,
in particolare in una vista in questa applicazione.
Per raggiungere questo obiettivo, abbiamo intenzione di sfruttare, come ho detto,
i parametri di percorso per
consentirci di supportare questo tipo di comportamento nella nostra applicazione.
Come facciamo a farlo?
Facciamolo iniziando con la definizione di un nuovo percorso con un parametro qui.
Per utilizzare il componente dettaglio piatto,
andremo nei percorsi,
e quindi definiremo un nuovo percorso dopo il menu qui.
Guarda il modo in cui il percorso è definito qui.
Quindi, questo è il percorso, il dettaglio del piatto.
Quindi, questo dettaglio piatto fa parte del componente dettaglio piatto.
Quindi, ha il suo punto di vista.
Ora, voglio essere in grado di navigare a quella vista,
ma con un ID parametro,
perché questa vista dettaglio piatto potrebbe visualizzare uno qualsiasi dei piatti nel mio menu.
Quindi, voglio essere in grado di visualizzare un piatto selezionato nel dettaglio del piatto.
Ora, quel piatto selezionato avrà un ID,
e voglio passare quell'ID nei miei componenti dettagliati del piatto, in
modo che possa rendere i dettagli di quel piatto particolare.
Quindi, nel router angolare,
supporta il passaggio dei parametri definendo parametri di percorso come questo,
nella definizione del router stesso.
Quindi, all'interno del percorso,
se dico due punti,
in modo che i due punti possano essere seguiti da un nome che fungerà da parametro route.
Quindi, in questo caso, userò il nome del parametro come ID.
Questo ID si riferisce all'ID piatto che abbiamo già dato a ciascuno dei nostri piatti.
Ora, questo mi porterà alla componente dettaglio piatto.
Quindi, aggiungeremo in questo nuovo percorso alla nostra definizione percorso angolare qui.
Salvare le modifiche.
Ora, nel componente menu,
quindi quando apro il file modello dei componenti del menu,
nel componente del menu,
sto visualizzando il piatto in basso qui.
Quindi, non voglio farlo.
Quindi, ho intenzione di eliminare quella parte dal mio modello di componenti del menu.
Invece, quello che mi rendo conto è che proprio lì,
sono in grado di accedere al piatto particolare.
Quindi, quando si fa clic sul piatto,
invece di fare questo clic qui,
quindi ho intenzione di rimuovere questo clic qui, e invece,
ho intenzione di definire un nuovo parametro qui chiamato RouterLink.
Vedrai l'uso di RouterLink qui.
Ora, questo RouterLink prende valori che puoi fornire nel tuo modello come questo.
Quindi, puoi fornirlo come array qui.
All' interno della matrice, è possibile fornire due parti di un array.
Allora, il dettaglio del piatto.
Quindi, hai visto che quando ho definito il percorso, ho detto «/dishdetail/: id.»
Quindi, il router angolare passerà qualsiasi parametro che fornisco
qui come parte della seconda parte di quell'URL lì.
Quindi, ora, insieme al dettaglio del piatto,
costruirò il mio RouterLink usando il dettaglio del piatto,
e anche l'ID del piatto qui.
Quindi, questo ID piatto si riferisce al piatto specifico che ho
selezionato dalla serie di piatti qui.
Allora, quel documento d'identita',
ho accesso ad esso qui.
Quindi, lo userò come seconda parte all'interno di questa matrice di parametri,
che passerò per il mio RouterLink qui.
Quindi, se lo definisco in questo modo,
quando clicco su quella particolare voce nel mio menu,
allora quel dettagliato, l'ID del piatto,
insieme
a questo dishdetail, verrà passato come collegamento del router.
Quindi, tali informazioni saranno ora disponibili attraverso i
miei router angolari ai miei componenti di dettaglio piatto.
Quindi, il router consente al componente dettaglio piatto di recuperare questo valore, l'
ID piatto, dal percorso angolare quando queste informazioni vengono passate in esso.
Come facciamo a farlo? Per questo,
dobbiamo andare al componente dettaglio piatto e correggerlo fino a ricevere queste informazioni.
Quindi, dopo aver apportato queste modifiche al componente menu,
passiamo ora al componente dettaglio piatto.
All' interno del componente dettaglio piatto,
vedete che attualmente,
stavo ricevendo il piatto come input qui.
Non ho più intenzione di ricevere i piatti e gli input.
Quindi, lascerò che come tale,
come semplicemente un piatto.
Non ho più bisogno dell'input perché non sto passando queste informazioni usando il piatto,
tra parentesi quadre che ho incluso nel mio componente menu.
Invece, queste informazioni sui piatti specifici che entrano attraverso il router angolare.
Come faccio ad avere accesso a quel documento d'identità?
Quindi, per farlo,
vado qui.
In questa applicazione, ho intenzione di aggiungere altre due importazioni qui,
uno di loro chiamato Params.
Quindi, questo Params mi dà accesso
ai parametri del router che sono disponibili quando entro.
Quindi, questo è dal router angolare, Params,
e anche un altro di cui ho bisogno è la posizione.
Posizione mi consente di tenere traccia della posizione della
mia pagina nella cronologia del mio browser.
Quindi, sarebbe utile per me tornare indietro dal mio dettaglio piatto quando ne ho bisogno.
Mi vedrai usare questo un po' più tardi.
Quindi, due cose che devo importare: Params e Location.
Vedremo come facciamo uso di questi due nella nostra applicazione.
Quindi, insieme a questo,
andremo dentro e qui, per il costruttore,
ora notiamo che il valore del piatto non è ora disponibile dal mio componente di menu.
Ma invece, devo andare esplicitamente a recuperare questo dal DishService.
Quindi, ho intenzione di importare
il DishService anche nel mio componente dettaglio piatto.
Qui DishService.
Quindi, questo mi permetterà di andare a prendere un piatto specifico dal Servizio Piatti.
Quindi, si ricorda che abbiamo già
il metodo GetDish e il servizio Dish che possiamo usare.
Ora, la prossima cosa importante per noi è entrare in possesso dell'id piatto.
Ora, come facciamo a entrare in possesso dell'id piatto.
Quindi, questo è dove nel costruttore.
Ora, devo rendere disponibili tutti questi servizi,
quindi dirò «Servizio piatto».
Quindi, l'altro è Location.
Quindi, Location è un altro servizio che è disponibile per me.
Quindi, entrambi saranno utilizzati all'interno della mia applicazione.
Quindi, quando questo componente piatto viene inizializzato,
allora a questo punto nel ngOnInit,
posso andare a recuperare le informazioni sul piatto specifico dai Params.
Allora, come facciamo?
Quindi, questo è dove vado a prendere l'id,
quindi direi più questo.
Anche per recuperare il valore della route,
ho bisogno di iniettare un altro servizio chiamato servizio ActivatedRoute.
Questo fa parte dei router angolari.
Quindi questo servizio ActivatedRoute mi fornisce l'accesso al percorso qui.
Quindi, direi,
quindi insieme al DishService ho anche bisogno di definire un altro chiamato
come percorso che sarebbe il servizio ActivatedRoute qui.
Quindi, tutti e tre saranno disponibili per me.
Quindi, proprio lì, posso chiedere
questo percorso, Snapshot, Params.
Questo Params è un array a
cui posso indicizzare usando l'id come valore, quindi Params id.
Questo mi recupera l'id dal parametro.
Quindi, quando definisco questo URL,
l'URL per questo sarebbe definito come Dishdetail.
Ad esempio, DishDetail 0,
DishDetail 1, DishDetail 2 e così via.
Quindi, è così che gli URL per questi componenti verranno definiti lì.
Quindi, quel valore che ho intenzione di prendere qui.
Ora, una volta ottenuto l'idea del piatto, allora posso dire,
questo piatto uguale a DishService
e ottenere piatto e GetDish prenderà l'id come parametro qui.
Quindi, con questo, quando clicco su un piatto nel mio componente di menu,
quel link che ho il collegamento del router che ho configurato lì,
passerà l'id del piatto al mio Router come RouterParameter,
e questo diventerà disponibile per me nel
mio componente DishDetail accedendo al servizio ActivatedRoute Qui.
Quindi, una volta entrato in possesso di esso,
allora posso usare quel valore per interrogare il piatto qui.
Ora, questo non è il modo completo di fare le cose.
Più avanti nel prossimo modulo,
useremo qualcosa chiamato JavaScript reattivo.
Quindi, a quel punto, tornerò per ridefinirlo in
un modo diverso in modo che il mio componente DishDetail possa tenere traccia di
tutte le modifiche apportate al mio URL e
modificare automaticamente le informazioni visualizzate da questo componente.
Ci arriveremo in uno degli esercizi successivi nel modulo successivo,
ma questo funziona bene per il momento quindi useremo questo.
Inoltre, ora quando vado ai dettagli del piatto
voglio essere in grado di tornare al menu dal piatto.
Quindi, ho intenzione di aggiungere in un pulsante Indietro nella mia carta un pulsante Indietro nella mia carta,
che quando premuto mi riporterà alla posizione precedente nel mio browser.
Quindi, per farlo aggiungo un metodo qui chiamato GoBack,
che essenzialmente farà uso
del servizio Location che ho incluso qui.
Il servizio Location fornisce un metodo chiamato Indietro che mi consente di
tornare all'elemento precedente nella cronologia del browser.
Quindi, in questo modo, tornerò al menu dai dettagli qui.
Quindi, questo metodo goBack viene aggiunto qui.
Ora, dobbiamo andare a sistemare il componente DishDetail qui.
Così, nel file modello dei componenti DishDetail,
qui abbiamo due pulsanti che sono come e pulsante Condividi.
Ho intenzione di aggiungere un altro pulsante qui.
Per questo pulsante, aggiungerei,
se si fa clic su questo pulsante,
questo si tradurrà in una chiamata al metodo goBack che
ho appena aggiunto al mio component.tsfile DishDetail.
Quindi, questo sarebbe un pulsante Indietro lì.
Mentre ci siamo,
potremmo anche risolvere i collegamenti dei componenti piè di pagina.
Quindi, andando al footercomponent.htmlfile
in basso qui dove abbiamo questi collegamenti, aggiungerò il routerLink qui con
il parametro home per il primo,
e poi il menu per il secondo,
e contattaci per il terzo nel piè di pagina qui.
Salviamo le modifiche.
Andando alla tua applicazione,
se ora fai clic sul menu,
le voci del menu sono mostrate qui.
Se clicchiamo su una delle voci di menu,
noterai che i dettagli del piatto sono mostrati in una vista separata qui.
Questi dettagli, come puoi vedere,
questo è esattamente ciò che il componente DishDetail stava visualizzando
in precedenza, ma nella parte inferiore del menu nel componente menu,
ora abbiamo quella visualizzazione in una vista separata.
Ora, questo componente DishDetail,
ora è possibile tornare al menu facendo clic sul pulsante Indietro.
Quindi, quando fai clic sul pulsante Indietro,
sei di nuovo al menu.
Quando si fa clic su un altro elemento,
si vede che i dettagli di quel particolare elemento vengono visualizzati qui,
allo stesso modo per il terzo e poi si può tornare indietro.
Ora, quando fai clic su uno di questi elementi,
nota il valore dell'URL nella barra degli indirizzi.
Quindi, questo è l'host locale 4.200 slash DishDetail barra 0.
Questo zero è l'id di questo piatto.
Quindi, quel valore viene passato,
ed è così che il componente DishDetail qui viene mostrato qui, torna indietro.
Quando fai clic sull'altro elemento,
puoi vedere che ora negli URL dice, DishDetail barra 1.
Allo stesso modo, per il quarto,
dice DishDetail barra 3 e così via.
Quindi, questo valore Parameter è quello che indica
al componente DishDetail quale particolare piatto
deve essere mostrato dal componente DishDetail.
Questo è ciò che viene utilizzato dal componente DishDetail per recuperare le informazioni su
quel piatto specifico da DishService utilizzando il metodo GetDish
e quindi tali informazioni vengono visualizzate nella visualizzazione del componente DishDetail.
Quindi, ora in questo esercizio,
abbiamo imparato come possiamo usare routeParameters per passare le informazioni a un componente,
e quindi il componente ottenere l'accesso al parametro e quindi utilizza quel routeParameter
per decidere il modo in cui rende
la vista o recuperare le informazioni e rendere la vista di conseguenza .
Con questo, completiamo questo esercizio.
Ora abbiamo quasi completato la costruzione della nostra applicazione a pagina singola
per l'applicazione ristorante su cui abbiamo lavorato finora.
Questo è un buon momento per fare un commit git con il messaggio,
Applicazione a pagina singola parte 2.