Ora che hai bagnato i piedi con gli osservabili angolari nell'esercizio precedente,
ti stai guardando indietro e dicendo:
«Oh osservabili non sono poi così male,
sono abbastanza semplici da fare uso di».
Quindi, diventiamo un po' piu' ambiziosi.
Andiamo un passo avanti e poi fare uso di un built-in osservabile all'interno Angular.
I parametri osservabili che provengono dal
servizio di route attivato all'interno del nostro modulo router.
Ora aggiorneremo il componente dettaglio piatto,
per fare uso dei parametri osservabili dal
servizio di siccità attivatore per
supportare alcune nuove funzionalità all'interno della nostra applicazione Angular.
Prima di passare ad aggiornare il componente dettaglio piatto,
voglio introdurre un altro metodo nel mio file dish service.ts.
Quindi aprire il file dish service.ts e poi aggiungeremo un nuovo metodo chiamato
getDishIds e questo fondamentalmente
restituirà tutti gli ID del piatto è per tutti i piatti della nostra collezione di piatti.
Quindi, per farlo, useremo un ritorno
e di metodo e prima di farlo,
questo sta restituendo un osservabile.
Di che tipo?
Questo sta restituendo un osservabile che consiste in una matrice di
stringa e ritardiamo
di 2.000 millisecondi o due secondi.
Allora, cos'e' che vogliamo restituire?
Vogliamo prendere l'array piatti,
estrarre tutti gli ID dalla matrice piatti e
poi darlo al nostro componente Dish Detail,
perché abbiamo bisogno che all'interno del nostro componente Dish Detail per implementare
la nuova funzionalità che stiamo andando a supportare nella nostra applicazione.
Ora, questo è un modo in cui voglio implementarlo.
Più tardi, possiamo vedere come possiamo farlo in un modo molto migliore,
in uno degli esercizi successivi.
Al momento, con il modo in cui il servizio è implementato,
questo è il meglio che ho potuto fare per implementare questa soluzione per dimostrare una nuova funzionalità.
Quindi, all'interno dell'osservabile,
quello che ho intenzione di fare è,
ho intenzione di prendere l'array di piatti e alla matrice di piatti.
Ho intenzione di utilizzare la mappa,
un operatore di array, la mappa dell'operatore di array JavaScript.
Quindi, l'operatore della mappa,
come funziona è che prende ogni elemento dall'array di piatti e possiamo mappare
quell'elemento in un altro elemento e quindi costruire
un altro array e quindi restituire quell'array modificato.
Quindi, per ogni elemento nel mio array di piatti,
prenderò quell'elemento e poi
estrarrò l'ID del piatto e poi dall'ID del piatto.
Quindi, finirò per costruire un nuovo array fuori di esso,
che contiene solo gli ID,
quindi una matrice di ID e vediamo già che gli ID sono stringa,
questo è quello che ho intenzione di restituire dal mio ID piatto qui.
Questo è tutto, l'operatore di array di mappe.
Se si cerca operatori di array JavaScript,
si vedrà cosa fa l'operatore di array di mappe.
Infatti, l'operatore map array è anche
interessante dal punto di vista degli osservabili,
perché un osservabile come hai visto,
può anche essere visto come un array,
un flusso di valori,
che può essere visto come un array.
Quindi, l'operatore della mappa può essere utilizzato anche negli osservabili.
Ma in questo momento, lo sto usando semplicemente come operatore di array JavaScript.
Salviamo le modifiche.
Ora, andremo al componente dettaglio piatto e quindi aggiornare il componente dettaglio piatto.
Ora, all'interno del componente dettaglio del piatto,
insieme
al piatto, dichiarerò una variabile chiamata dishIds,
che è una matrice di stringa.
Questo DishID memorizzerà tutti gli ID di
tutti i piatti che sono nella mia collezione di piatti nel mio menu.
Quindi, avrò anche
altre due variabili chiamate precedente e successiva della stringa di tipo.
Ora, perché ho bisogno di questi?
Diventerà un po 'più chiaro,
una volta implementata la vista,
dove farò uso di questo.
Ora, quello che farò qui è che,
all'interno del mio ngInit in precedenza,
abbiamo lasciato che id sia uguale a più questo ID di parametri route.snapshot.
Quando l'ho fatto nell'esercizio precedente,
non ti ho spiegato cosa stava facendo l'istantanea e perché lo stiamo facendo in questo modo?
Perché era necessario comprendere gli osservabili,
prima di capire cosa significa l'istantanea.
Ora, in Angular, il servizio di route attivato fornisce una serie di osservabili.
Uno degli osservabili è chiamato params.
Ciò che questo parametro ci fornisce
è un modo per ottenere i valori dei parametri all'interno del mio URL.
Quindi, hai visto che quando introduci i parametri del percorso,
hai introdotto uno dei parametri del percorso come ID dei due punti.
Tale ID dei due punti diventa disponibile come osservabile.
Quindi, ogni volta che quel valore cambia,
puoi osservare i cambiamenti in quel valore e quindi agire in modo corrispondente.
Ma, prima quando abbiamo implementato la componente di dettaglio piatto,
non sapevamo degli osservabili.
Quindi, non riuscivo a spiegare cosa stava facendo l'istantanea a quel punto.
Ora, lasciatemi tornare indietro e spiegare esattamente cosa fa l'istantanea.
Quando usiamo questo come istantanea qui,
quello che stiamo facendo è,
stiamo prendendo una istantanea
dal servizio di route e quindi stiamo ottenendo
il parametro osservabile in quel particolare punto del tempo.
Il valore dei parametri in quel particolare punto del
tempo e quindi utilizzarlo all'interno della nostra applicazione.
Anche se questo non è il modo ideale per farlo.
Invece, quindi facciamo uso
direttamente dell'osservabile e quindi rispondiamo ogni volta che cambia osservabile.
Quindi, come aggiorniamo questo codice per utilizzare direttamente l'osservabile?
Quindi, quello che ci rendiamo conto è che dal servizio di rotta attivato,
abbiamo i parametri osservabili a nostra disposizione.
Quindi, faremo uso dei parametri osservabili e
ogni volta che c'è un cambiamento in cui i parametri osservabili,
possiamo avviare un cambiamento all'interno del nostro componente DishDetail.
Permettetemi di illustrarvi come faremo uso
dei parametri osservabili aggiornando questo codice.
Quindi, andando a questo codice,
quello che sto per fare ora,
è che ho intenzione di cambiare questo in dire,
«Ho questo percorso e da questo percorso,
ho già i parametri disponibili.»
Quindi, ho intenzione di rimuovere l'istantanea e uso i parametri.
Quindi, con questi parametri,
quello che ho ora è l'accesso ai parametri osservabili.
Ora, dal momento che abbiamo questi parametri osservabili,
ho intenzione di usare un operatore su questo parametri osservabili e quindi modificato.
Quindi, l'operatore che ho intenzione di utilizzare si chiama operatore SwitchMap.
L' operatore SwitchMap mi consente
di utilizzare i parametri osservabili e si vede la linea rossa ondulata che significa,
che ho bisogno di importare lo SwitchMap osservabile qui.
Quindi, andrò ai
miei input qui e
poi inserirò rxjs e operatore.
Quindi, dai parametri osservabili,
ottengo parametri che sono del tipo Params.
Quindi, ricorda che abbiamo importato i parametri dalla libreria del router qui.
Quindi, abbiamo implorato i parametri qui,
dalla libreria del router e anche abbiamo importato il servizio di route di attivazione qui,
e poi li abbiamo resi disponibili all'interno del nostro costruttore qui,
attraverso il percorso dell'attivatore.
Quindi, è per questo che siamo in grado di fare questo percorso parametri per entrare in possesso dei parametri osservabili.
Userò l'operatore SwitchMap sui parametri
osservabili e poi quando ottengo i parametri osservabili,
quello che farò è prenderlo e poi dire, questo DishService.
GetDish, e quindi questo ID ora dovrebbe essere ottenuto usando i parametri.
Vedi il parametro che abbiamo lì.
Dai parametri, dirò tra parentesi ID.
Quindi, quello che succede è che ogni volta che i parametri osservabili cambiano il valore,
il che significa che il parametro route cambia valore, quindi immediatamente,
l'operatore della mappa di commutazione prenderà il valore dei parametri
e quindi eseguirà un getDish dal mio DishService.
Quindi, questo sarebbe avviato automaticamente,
e questo sarà disponibile come l'altro
osservabile che viene emesso facendo questo operatore mappa interruttore su questo osservabile.
Quindi, stiamo creando un nuovo osservabile che è il GetDish,
che sta per restituire l'oggetto piatto qui.
Ora, una volta ottenuto il GetDish lì,
allora questo può ora essere disponibile come osservabile.
Mi iscrivo solo a quell'osservabile usando la sottoscrizione qui.
Poi, lì ottengo il piatto.
Questo piatto si ottiene facendo questo GetDish qui.
Quel piatto, allora posso fare uso per mapparlo nella
mia variabile piatto che ho dichiarato prima.
Quindi, in questo modo, il mio piatto viene aggiornato.
Quindi, ogni volta che i parametri osservabili cambiano,
il mio piatto verrà aggiornato al nuovo piatto.
Quindi, nota come sto prendendo un osservabile, i parametri osservabili,
e poi sto mappando i parametri osservabili in un altro osservabile che sta fondamentalmente
andando a recuperare il valore del piatto dal mio DishService,
e quindi rendendolo disponibile come osservabile.
Quindi, mi sto sottoscrivendo a quell'osservabile qui, e quindi,
sto ottenendo il valore del piatto qui,
e poi sto mappando il valore del piatto o meglio
rendendo la variabile del piatto uguale al valore del piatto qui.
Si noti come usando gli osservabili,
ora si è in grado di prendere uno osservabile quindi mapparlo in un altro osservabile.
Perché è interessante?
Se ora, ho un modo per modificare quel parametro di percorso,
allora sarò in grado di passare da un piatto all'altro e vedere i diversi piatti.
Sfortunatamente, non ce l'ho.
Quindi, ho bisogno di modificare i componenti del piatto per consentirmi di farlo.
Ora, questo è dove includerò un paio di pulsanti nella mia vista che quando clicco,
sarò in grado di navigare attraverso la mia lista di piatti.
Ora, per essere in grado di navigare nella mia lista di piatti,
ho bisogno di conoscere il set di tutti i miei piatti,
o almeno ho bisogno di conoscere i documenti di tutti i miei piatti.
Questo e' il motivo per cui uso questo DishID qui, ok?
Quindi, ora capisci perché ho incluso il metodo dishID nel mio DishService.
Quindi, poi comincio io.
Ho intenzione di ottenere prima
i DishID
chiamando il
metodo DishService, getDishIds a quel punto.
Sto ancora lavorando con il vecchio modo di fare le cose.
Devo rendermi conto che questo getDishIds sta inviando in osservabile.
Quindi, ho bisogno di iscrivermi a quell'osservabile.
Vedete come è necessario cambiare il vostro modo di pensare
quando si opera con le variabili qui.
Quindi, diremo dishIds iscriversi,
e all'interno della sottoscrizione,
otterremo il parametro che è un array di stringhe,
e poi direi proprio lì,
dishID sarà uguale a dishIds.
Vedi, quanto è facile
cambiare il tuo modo di pensare quando vuoi avere a che fare con un osservabile.
Quindi, il getDishIds sta inviando un osservabile,
e mi sto iscrivendo a quell'osservabile e poi ho i DISHID qui disponibili.
Quindi, anche sottoscrivendo il parametro.
Se posso cambiare il mio parametro,
valore valore del parametro percorso all'interno del mio codice,
allora sarò in grado di navigare tra i piatti.
Quindi, implementiamo quella parte.
Sta diventando interessante.
Quindi, per consentirmi di farlo,
quindi introdurrò un altro metodo qui chiamato setPrevNext,
e a questo, invierò un parametro dishId.
Ora, dato il mio attuale dishId,
volevo essere in grado di trovare il precedente e il successivo dishId in modo da poter implementare la
mia navigazione tra i piatti all'interno del mio componente dishdetail.
Quindi, questo è il motivo per cui ho dichiarato il prev e il prossimo.
Ora, ho bisogno di essere in grado di inizializzare questi due valori.
Tutto quello che so ora è il mio attuale dishId.
Quindi, usando l'attuale dishId,
voglio essere in grado di trovare il precedente e il successivo dishId.
Quindi, in questo metodo,
ho intenzione di fare il precedente e il prossimo dishId.
Quindi, qui dirò,
lascia indice uguale a questo DishId.
Ora, conosco solo l'identificazione del mio piatto,
ma l'identificazione del mio piatto non mi dà tutto.
Devo essere in grado di trovare il piatto in questa serie di ID,
quindi è per questo che sto dicendo questo dishIds e indexOf.
Dovresti conoscere l'operatore indexOf su un array JavaScript.
L' operatore indexOf accetta un valore e quindi trova l'indice di tale valore nella matrice.
Quindi, indexOf e il parametro qui,
darò è il dishId,
il dishId che otterrò in breve tempo.
Ora, una volta ottenuto l'indice di questo valore corrente,
posso quindi mappare
i due DishID precedenti.
Quindi, questo è dove
farò un po 'di codice complicato qui che mi permetterà di avvolgermi quando sono.
Quindi, si noti che questo array DishID contiene un certo numero di valori lì.
Se il mio valore corrente del mio dishId è il primo elemento,
il valore precedente sarà l'elemento indicizzato zeroth nel mio array.
Ma se il mio valore attuale è l'elemento zeroth,
il primo elemento nel mio array,
allora voglio avvolgermi per ottenere l'ultimo elemento nel mio array.
Quindi, questo è dove faccio uso dell'operatore modulo con
qualche modo matematico di avvolgere le cose in giro.
Quindi, direi questo dishId
più indice meno uno, e modulo la lunghezza di questo DishId.
Quindi, quello che sto facendo è,
il valore precedente sarà l'indice corrente, l'
indice del valore corrente,
più la lunghezza dei piatti meno uno.
Ora, se l'indice è uno,
indice meno uno mi darà zero.
Se l'indice è zero,
indice meno uno mi darà meno uno,
ma non è quello che voglio.
Voglio avvolgermi e ottenere la lunghezza dishId meno uno.
Quindi, è per questo che sto includendo questo lì dentro,
e poi facendo un modulo con i DISHID.
Quindi, quando l'indice è zero,
mi avvolgerò per ottenere l'ultimo elemento nel mio array.
Quindi, è così che inizializzo il valore precedente.
Quindi, il valore successivo,
userò lo stesso approccio,
ma avvolgerò dicendo indice più uno.
Quindi, se sono attualmente all'ultimo elemento dell'array,
allora voglio avvolgermi a zero.
Quindi, questa e' l'altra parte di quello che sto facendo.
Quindi, lì, sto impostando il precedente e il successivo.
Quindi, quando dovrei impostare il precedente e il successivo?
Ogni volta che il mio piatto cambia,
devo essere in grado di iniziare una chiamata a questo.
Ora, dove sto cambiando il valore del mio piatto?
Guardando indietro l'iscrizione qui,
nota che proprio lì,
stai cambiando il tuo piatto ogni volta che il nostro parametro cambia.
Quindi, a quel punto,
voglio ripristinare il mio valore precedente e successivo.
Quindi, ho intenzione di cambiare questo in un blocco di codice qui.
Quindi, direi questo setPrevNext,
e quindi il parametro sarebbe dishId.
Questo è tutto. Quindi, con questo cambiamento,
quello che succede è che ogni volta che il mio piatto viene aggiornato,
aggiornerò il precedente e il successivo anche corrispondentemente da qui.
Quindi, con questo piccolo cambiamento,
il mio DishID sarà il piatto attuale.
Il precedente punterà al piatto precedente
e il successivo sarà puntato al successivo dishId.
Quindi, ho tutti e tre i quali mi servono.
Ora, posso fare uso di questi tre valori per implementare il modo di navigare
tra i piatti nel mio modello includendo un paio di pulsanti nel mio modello.
Quindi, andiamo al modello di componenti dishdetail,
e quindi includiamo un paio di pulsanti che mi permettono di navigare tra i piatti.
Andando al componente Dish Detail mentre sono qui,
lasciami prendere questo NGif da questa carta e poi spostarlo nel div lassù.
Voglio nascondere l'intero div,
quando il mio piatto non è attualmente difetto,
allo stesso modo per i commenti anche.
Trovo che questo sia un po 'fastidioso
quando le informazioni del mio piatto vengono recuperate dal server.
Quindi, farò questa modifica per entrambi i due div che
uno mostra i commenti e l'altro che mostra i dettagli del piatto nella scheda.
Con questi due aggiornamenti,
all'interno delle mie azioni della carta,
includerò
un altro pulsante di tipo pulsante ovviamente e questo pulsante,
includerò il RouterLink.
Nel momento in cui vedi il collegamento del router
, dici subito: «Oh,
so cosa stai cercando di fare.
Stai cercando di convertire questo pulsante per essere in grado di navigare tra
i diversi componenti all'interno del mio servizio.»
Quindi, per il RouterLink,
ho intenzione di fornire una matrice di valori e la matrice di valori per il RouterLink,
ho intenzione di fare dishdetail.
Inoltre, la seconda parte.
Vedi, questa e' la parte interessante.
La seconda parte di questo array sarà prev,
che è la variabile che ho dichiarato nel mio componente.
Quindi, con questo, questo pulsante diventerà un link al piatto precedente nella mia lista di piatti.
Spiffy, giusto?
Quindi, con quello, cos'altro?
Lasciatemi chiudere il pulsante qui e poi all'interno del pulsante,
Ho intenzione di utilizzare un carattere impressionante icona
fa chevron-left.
Quindi, questo è tutto. Questo pulsante sarà un pulsante con un'icona lì.
Quindi, ora abbiamo un pulsante qui,
ho anche intenzione di includere un altro pulsante qui.
Prima di includere il pulsante,
farò span class flex-spacer,
mi hai visto usare il flex-spacer in uno degli esercizi precedenti.
Quindi, vedi cosa sto facendo,
sto allungando per includere il secondo pulsante.
Quindi, per il secondo pulsante,
ho intenzione di copiare questo
e poi incollarlo lì e quindi aggiornare questo per dire prev.
Invece di precedente, andrò dopo e poi
fa-chevron-sinistra a fa-chevron-destra, e questo è tutto.
Salviamo le modifiche ai nostri componenti Dish Detail
e anche i file rimanenti.
Dopo questo aggiornamento, andiamo a controllare cosa fa la nostra applicazione.
Andando alla mia applicazione nel browser,
andiamo al componente Menu.
Vediamo il menu e selezioniamo una voce dal menu qui.
Quindi, si noti che ora questa voce dal piatto del menu è visualizzata qui.
Nota in basso,
abbiamo due pulsanti qui, a sinistra e a destra.
Quando clicchiamo sul pulsante sinistro,
nota come siamo in grado di passare al piatto precedente nell'elenco dei piatti.
Posso continuare a fare di nuovo a sinistra e continuare a navigare a sinistra e a destra.
Si noti che quando lo faccio,
la mia vista effettiva non viene ricaricata,
invece vado solo a recuperare
i dati relativi al piatto dal servizio e quindi ad aggiornare la mia vista qui.
La ragione per cui siamo in grado di farlo è perché
abbiamo l'osservabile, i parametri osservabili.
Quindi, ogni volta che clicco su questi due,
a sinistra e a destra, i parametri osservabili,
nota come in questo momento l'indirizzo mostra dishdetail zero.
Se clicco a destra,
allora che verrà aggiornato da dishdetail zero a dishdetail uno.
Quel parametro cambia, e questo farà sì che il mio osservabile
vada a prendere il nuovo piatto dal servizio di piatti.
Quindi, il nuovo piatto viene recuperato,
la variabile piatto nel mio componente viene aggiornata
e quando viene aggiornata,
anche la mia vista viene aggiornata.
Quindi, notare che sto usando la stessa vista,
sono in grado di navigare tra i vari piatti che fanno parte della mia lista di piatti.
Questa è la parte interessante che puoi ottenere usando i parametri
osservabili dall'activator.service all'interno dell'applicazione Angular.
Modo interessante di fare uso di osservabili bollette nostra applicazione angolare.
Naturalmente, il modo in cui l'ho implementato,
l'ho fatto un po 'un modo artificioso di fare le cose.
Ho dovuto procurarmi la lista dei documenti dei piatti.
Ho dovuto modificare il precedente e il successivo e così via.
Se hai un modo per ottenere
automaticamente il valore precedente e il valore successivo dal tuo servizio,
ogni volta che recuperi un piatto,
l'implementazione del punteggio diventerà un po 'più facile.
In questo momento non ce l'abbiamo.
Quindi, ho risolto il problema perché volevo solo illustrare il modo
di utilizzare un osservabile come questo all'interno della tua applicazione Angular.
Se possiamo implementare il servizio che restituirà il valore
precedente e il valore successivo ogni volta che prendiamo un piatto,
allora tutto questo mal di testa sarà molto più semplicemente risolto.
Ritorniamo l'idea a una fase successiva.
Ma al momento, si vede come stiamo facendo
uso dei parametri osservabili al fine di implementare
un modo interessante di supportare una nuova funzionalità all'interno della nostra applicazione Angular.
Questo completa questo esercizio.
Questo è un buon momento per fare un commit git con il messaggio RXJS Parte due.