Ahora que te has mojado los pies con observables angulares en el ejercicio anterior,
estás mirando hacia atrás y diciendo:
«Oh observables no son tan malos después de todo,
son bastante sencillos de hacer uso de».
Por lo tanto, nos hacemos un poco más ambiciosos.
Vamos un paso más allá y luego hagamos uso de un observable incorporado dentro de Angular.
Los parámetros observables que provienen de
el servicio de ruta activado dentro de nuestro módulo de router.
Ahora vamos a actualizar el componente de detalle del plato,
para hacer uso de los parámetros observables desde
el servicio de sequía activador a
apoyar algunas nuevas características dentro de nuestra aplicación Angular.
Antes de pasar a actualizar el componente de detalle del plato,
quiero introducir un método más en mi archivo dish service.ts.
Así que abra el archivo service.ts plato y luego agregaremos un nuevo método llamado
getDisYids y esto básicamente será
devolver todos los ID plato es para todos los platos en nuestra colección de platos.
Entonces, para hacer eso, usaremos un retorno
y de método y antes de hacerlo,
esto está devolviendo un observable.
¿De qué tipo?
Esto devuelve un observable que consiste en una matriz de cadena
y vamos a retrasarlo
por 2.000 milisegundos o dos segundos.
Entonces, ¿qué es lo que queremos devolver?
Queremos tomar la matriz de platos,
extraer todos los ID de la matriz de platos y
luego dársela a nuestro componente Dish Detail,
porque necesitamos que dentro de nuestro componente Dish Detail para implementar
la nueva característica que vamos a apoyar en nuestra aplicación.
Ahora, esta es una forma en la que quiero implementarlo.
Más adelante, podemos ver cómo podemos hacerlo de una manera mucho mejor,
en uno de los ejercicios posteriores.
Por el momento, con la forma en que se implementa el servicio,
esto es lo mejor que pude hacer para implementar esta solución para demostrar una nueva característica.
Así que, dentro de lo observable,
lo que voy a hacer es,
voy a tomar la matriz de platos y a la matriz de platos.
Voy a usar el mapa,
un operador de matriz, el mapa del operador de matriz JavaScript.
Entonces, el operador del mapa,
cómo funciona es que toma cada elemento de la matriz de platos y podemos mapear
ese elemento en otro elemento y luego construir
otra matriz y luego devolver esa matriz modificada.
Entonces, para cada elemento en mi matriz de platos,
voy a tomar ese artículo y luego
extraer el ID del plato y luego del ID del plato.
Entonces, terminaré construyendo una nueva matriz a partir de ella,
que contiene solo los ID,
por lo que una matriz de ID y ya vemos que los ID son string,
eso es lo que voy a devolver de mi ID de plato aquí.
Eso es todo, el operador de la matriz de mapas.
Si busca operadores de matriz JavaScript,
verá lo que hace el operador de matriz de mapa.
De hecho, el operador de matriz de mapa es también
interesante desde la perspectiva de los observables,
porque un observable como usted vio,
también puede ser visto como una matriz,
un flujo de valores,
que se puede ver como una matriz.
Entonces, el operador de mapa también se puede usar en observables.
Pero en este momento, lo estoy usando simplemente como un operador de matriz JavaScript.
Guardemos los cambios.
Ahora, iremos al componente de detalle de Dish y luego actualizaremos el componente de detalle de Dish.
Ahora, dentro del componente de detalle de Dish,
junto con el Dish,
voy a declarar una variable llamada DISHIDs,
que es una matriz de cadena.
Este DISIDs almacenará todos los ID de
todos los platos que están en mi colección de platos en mi menú.
Entonces, también tendré
dos variables más llamadas anterior y siguiente de la cadena de tipo.
Ahora, ¿por qué los necesito?
Eso se volverá un poco más claro,
una vez que implementes la vista,
donde voy a hacer uso de esto.
Ahora, lo que haré aquí es que,
dentro de mi ngInit anterior,
dejamos que id sea igual a plus this route.snapshot params ID.
Cuando hice esto en el ejercicio anterior,
no te expliqué qué qué estaba haciendo la instantánea y por qué lo estamos haciendo de esta manera?
Debido a que necesitabas entender observables,
antes de entender lo que significa la instantánea.
Ahora, en Angular, el servicio de ruta activado proporciona un conjunto de observables.
Uno de los observables se llama params.
Lo que nos proporciona este parámetro,
es una forma de obtener los valores de parámetro dentro de mi URL.
Por lo tanto, vio que cuando introdujo los parámetros de ruta,
introdujo uno de los parámetros de ruta como ID de dos puntos.
Ese ID de dos puntos queda disponible como observable.
Entonces, cada vez que cambia ese valor,
puede observar cambios en ese valor y luego tomar las medidas correspondientes.
Pero, antes cuando implementamos el componente de detalle del plato,
no sabíamos acerca de observables.
Entonces, no pude explicar lo que estaba haciendo la instantánea en ese momento.
Ahora, déjame volver atrás y explicar exactamente lo que hace la instantánea.
Cuando usamos esto como instantánea aquí,
lo que estamos haciendo es,
estamos tomando una instantánea de
el servicio de ruta y luego estamos obteniendo
el parámetro observable en ese punto particular de tiempo.
El valor de los parámetros en ese punto particular de
tiempo y luego hacer uso de él dentro de nuestra aplicación.
Aunque esa no es la forma ideal de hacerlo.
En su lugar, hagamos uso del
observable directamente y luego respondamos cada vez que ese cambio observable.
Entonces, ¿cómo actualizamos este código para hacer uso de lo observable directamente?
Entonces, lo que nos damos cuenta es que desde el servicio de ruta activado,
tenemos los parámetros observables disponibles para nosotros.
Por lo tanto, haremos uso de los parámetros observables y
en cualquier momento que haya un cambio en donde los parámetros observables,
podemos iniciar un cambio dentro de nuestro componente DishDetail.
Permítanme ilustrar cómo vamos a hacer uso de
los parámetros observables mediante la actualización de este código.
Así que, yendo a este código,
lo que voy a hacer ahora,
es que voy a cambiar esto en decir,
«Tengo esta ruta y de esta ruta,
ya tengo los params disponibles.»
Entonces, voy a eliminar la instantánea y uso los parámetros.
Entonces, con este parámetro,
lo que tengo ahora es el acceso a los parámetros observables.
Ahora, ya que tenemos este parámetro observable,
voy a usar un operador en este parámetro observable y luego lo modifiqué.
Entonces, el operador que voy a usar se llama operador SwitchMap.
El operador SwitchMap me permite
hacer uso de los parámetros observables y ves la línea roja Squiggly que significa,
que necesito importar el SwitchMap observable aquí.
Entonces, iré a
mis entradas aquí y
luego ingresaré rxjs y operador.
Entonces, de los parámetros observables,
obtengo parámetros que son del tipo Params.
Por lo tanto, recuerde que importamos los parámetros de la biblioteca del enrutador aquí.
Entonces, imploramos a params aquí,
de la biblioteca del router y también importamos el servicio de ruta de activación aquí,
y luego los hicimos disponibles dentro de nuestro constructor aquí,
a través de la ruta del activador.
Entonces, es por eso que somos capaces de hacer este parámetro de ruta para obtener los parámetros observables.
Voy a usar el operador SwitchMap en los parámetros
observables y luego cuando obtengo los parámetros observables,
lo que voy a hacer es tomar eso y luego decir, este DishService.
getDish, y luego este ID ahora debe obtenerse usando los parámetros.
Ves el parámetro que tenemos allí.
De los parámetros, diré entre paréntesis ID.
Entonces, lo que sucede es que cada vez que los parámetros observables cambian el valor,
, lo que significa que el parámetro de ruta cambia el valor, inmediatamente,
el operador del mapa del interruptor tomará el valor de parámetros,
y luego hará un GetDish desde mi DishService.
Por lo tanto, esto se iniciaría automáticamente,
y esto estará disponible como el otro
observable que se emite haciendo este operador de mapa de conmutación en este observable.
Entonces, estamos creando un nuevo observable que es GetDish,
que va a devolver el objeto plato aquí.
Ahora, una vez que tengamos el GetDish allí,
entonces eso ahora puede estar disponible como observable.
Acabo de suscribirme a ese observable usando la suscripción aquí.
Entonces, allí obtengo el plato.
Este plato se obtiene haciendo este GetDish aquí.
Ese plato, entonces puedo hacer uso para mapear en
mi variable plato que he declarado anteriormente.
Así que, de esta manera, mi plato ahora se actualiza.
Así que, cada vez que los parámetros observables cambios,
mi plato se actualizará al nuevo plato.
Entonces, note cómo estoy tomando uno observable, los parámetros observables,
y luego estoy mapeando los parámetros observables en otro observable que es básicamente
ir a buscar el valor del plato de mi DishService,
y luego hacer que esté disponible como observable.
Luego, me suscribo a ese observable aquí, y luego,
obtengo el valor del plato aquí,
y luego estoy mapeando el valor del plato o más bien
haciendo que la variable del plato sea igual al valor del plato aquí.
Observe cómo al usar los observables,
ahora puede tomar uno observable y luego asignarlo a otro observable.
¿Por qué esto es interesante?
Si ahora, tengo una forma de modificar ese parámetro de ruta,
entonces podré cambiar entre diferentes platos y ver los diferentes platos.
Desafortunadamente, no tengo eso en su lugar.
Entonces, necesito modificar los componentes del plato para permitirme hacer eso.
Ahora, aquí es donde incluiré un par de botones en mi vista que cuando haga clic,
podré navegar a través de mi lista de platos.
Ahora, para poder navegar a través de mi lista de platos,
necesito saber el conjunto de todos mis platos,
o al menos necesito saber las identificaciones de todos mis platos.
Esa es la razón por la que uso este DISIDs aquí, ¿de acuerdo?
Entonces, ahora ves por qué incluí el método DISHIDs en mi DishService.
Así que, entonces empiezo.
Voy a obtener primero
los DishID por
llamando al método DishService,
getDishIDs en ese punto.
Todavía estoy trabajando con la antigua forma de hacer las cosas.
Tengo que darme cuenta de que este GetDisHIDs está enviando en observable.
Entonces, necesito suscribirme a ese observable.
Ves cómo necesitas cambiar tu forma de pensar cuando
estás operando con las variables aquí.
Entonces, diríamos DISHIDs subscribe,
y dentro de la suscripción,
obtendremos el parámetro que es una matriz de cadenas,
y luego diría justo allí,
DISHIDs será igual a DISHIDs.
Mira, lo fácil que es
cambiar tu forma de pensar cuando quieres lidiar con un observable.
Entonces, GetDishids está enviando un observable,
y me suscribo a ese observable y luego tengo los Dishids aquí disponibles.
Entonces, también suscribiéndose al parámetro.
Si puedo cambiar mi parámetro, valor
parámetro ruta valor dentro de mi código,
entonces podré navegar entre los platos.
Entonces, implementemos esa parte.
Esto se está poniendo interesante.
Entonces, para permitirme hacer eso,
así que introduciré otro método aquí llamado setPrevNext,
y a esto, enviaré un parámetro dishID.
Ahora, dado mi actual DisHID,
quería poder encontrar el anterior y el siguiente DisHID para poder implementar
mi navegación entre los platos dentro de mi componente dishdetail.
Entonces, esa es la razón por la que declaré el prev y el siguiente.
Ahora, necesito poder inicializar estos dos valores.
Todo lo que sé ahora es mi disID actual.
Entonces, usando el DisHID actual,
quiero poder encontrar el anterior y el siguiente DisHID.
Entonces, en este método,
voy a hacer el anterior y el siguiente DISHID.
Así que, aquí voy a decir,
dejar índice igual a este DISHID.
Ahora, sólo sé la ID de mi plato,
pero la ID de mi plato no me da todo.
Necesito poder encontrar el plato en esta matriz de ID,
, así que es por eso que estoy diciendo esto dishID e indexOf.
Debe conocer el operador IndexOf en una matriz de JavaScript.
El operador indexOf toma un valor y luego encuentra el índice de ese valor en la matriz.
Entonces, indexOf y el parámetro aquí,
daré es el dishID,
el dishID que obtendré en poco tiempo.
Ahora, una vez que obtengo el índice de este valor actual,
puedo mapear
los dos DISHID anteriores.
Entonces, aquí es donde
haré un poco de código complicado aquí que me permitirá envolver cuando lo esté.
Por lo tanto, observe que esta matriz DISHIDs contiene un cierto número de valores allí.
Si mi valor actual de mi DishID es el primer elemento,
entonces el valor anterior será el elemento indexado zeroth en mi matriz.
Pero si mi valor actual es el elemento zeroth,
el primer elemento en mi matriz,
entonces quiero envolver para obtener el último elemento en mi matriz.
Entonces, aquí es donde hago uso del operador de módulo con
alguna forma matemática de envolver las cosas.
Entonces, diría que este DISHID
más índice menos uno, y modula la longitud de este DISHID.
Así que, lo que estoy haciendo es,
el valor anterior será el índice actual,
índice del valor actual,
más la longitud de los platos menos uno.
Ahora, si el índice es uno, el índice
menos uno me dará cero.
Si el índice es cero, el índice
menos uno me dará menos uno,
pero eso no es lo que quiero.
Quiero envolver y obtener la longitud de DisHID menos uno.
Entonces, es por eso que estoy incluyendo esto allí,
y luego haciendo un módulo con los DISHID.
Entonces, cuando el índice sea cero,
me envolveré para obtener el último elemento en mi matriz.
Entonces, así es como inicializo el valor anterior.
Entonces, el siguiente valor,
usaré el mismo enfoque,
pero terminaré diciendo índice más uno.
Entonces, si actualmente estoy en el último elemento de la matriz,
entonces quiero envolver a cero.
Entonces, esa es la otra parte de lo que estoy haciendo.
Entonces, allí, estoy configurando el anterior y el siguiente.
Entonces, ¿cuándo debería establecer el anterior y el siguiente?
Cada vez que cambie mi plato,
necesito poder iniciar una llamada a esto.
Ahora, ¿dónde estoy cambiando mi valor de plato?
Mirando hacia atrás en la suscripción aquí,
nota que justo allí,
estás cambiando tu plato cada vez que nuestro parámetro cambia.
Así que, en ese punto,
quiero restablecer mi valor anterior y siguiente.
Entonces, voy a cambiar esto en un bloque de código aquí.
Entonces, diría que este setPrevNext,
y luego el parámetro sería dishID.
Eso es todo. Así que, con este cambio,
lo que sucede es cada vez que mi plato se actualiza,
actualizaré el anterior y el siguiente también correspondientemente desde aquí.
Así que, con este pequeño cambio,
mi DishID será el plato actual.
El anterior apuntará al plato anterior,
y el siguiente será apuntado al siguiente DisHID.
Por lo tanto, tengo los tres que necesito.
Ahora, puedo hacer uso de estos tres valores para implementar la forma de navegar
entre los platos en mi plantilla incluyendo un par de botones en mi plantilla.
Así que, vamos a la plantilla de componentes dishdetail,
y luego incluir un par de botones que me permite navegar entre los platos.
yendo al componente de detalle del plato mientras estoy aquí,
déjame tomar este nGIF de esta tarjeta y luego moverlo al div allí arriba.
Quiero ocultar todo el div,
cuando mi plato no es actualmente defecto,
de manera similar para los comentarios también.
Encuentro que esto es un poco irritante
cuando se está obteniendo la información de mi plato del servidor.
Entonces, voy a hacer este cambio tanto para los dos divs que
uno mostrando los comentarios y el otro mostrando los detalles del plato en la tarjeta.
Con estas dos actualizaciones,
dentro de mis acciones de tarjeta,
voy a incluir
un botón más de tipo de botón obviamente y este botón,
incluiré el routerLink.
En el momento en que ves el enlace del router,
inmediatamente dices, «Oh,
sé lo que estás tratando de hacer.
Estás tratando de convertir este botón para poder navegar entre
los diferentes componentes dentro de mi servicio.»
Entonces, para el routerLink,
voy a proporcionar una matriz de valores y la matriz de valores para el routerLink,
voy a hacer dishdetail.
Además, la segunda parte.
Mira, esta es la parte interesante.
La segunda parte de esta matriz será anterior,
que es la variable que declaré en mi componente.
Entonces, con esto, este botón se convertirá en un enlace al plato anterior en mi lista de platos.
Spiffy, ¿verdad?
Entonces, con eso, ¿qué más?
Déjame cerrar el botón aquí y luego dentro del botón,
voy a utilizar un icono de fuente impresionante
fa chevron-left.
Así que, eso es todo. Este botón será un botón con un icono allí.
Así que, ahora tenemos un botón aquí,
también voy a incluir otro botón aquí.
Antes de incluir el botón,
voy a hacer span class flex-spacer,
me viste usando el flex-spacer en uno de los ejercicios anteriores.
Así que, ves lo que estoy haciendo,
me estoy estirando para incluir el segundo botón.
Entonces, para el segundo botón,
solo voy a copiar este
y luego pegarlo allí y luego actualizar este para decir anterior.
En lugar de anterior, iré siguiente y luego
fa-chevron-left a fa-chevron-right, y eso es todo.
Guardemos los cambios en nuestros Componentes de Detalle de Dish,
y también los archivos restantes.
Después de esta actualización, vamos a ver lo que hace nuestra aplicación.
Ir a mi aplicación en el navegador,
vamos al componente Menu.
Vemos el Menú y seleccionemos un elemento del Menú aquí.
Por lo tanto, tenga en cuenta que ahora este elemento del plato del menú se muestra aquí.
Aviso en la parte inferior,
tenemos dos botones aquí, izquierda y derecha.
Cuando hacemos clic en el botón izquierdo,
nota cómo somos capaces de pasar al plato anterior en la lista de platos.
Puedo seguir haciendo a la izquierda otra vez y seguir navegando hacia la izquierda y la derecha.
Observe que cuando hago esto,
mi vista real no se vuelve a cargar,
en su lugar solo voy a buscar
los datos relacionados con el plato del servicio y luego actualizar mi vista aquí.
La razón por la que somos capaces de hacer esto es porque
tenemos lo observable, los parámetros observables.
Así que, cada vez que hago clic en estos dos,
izquierda y derecha, los parámetros observables,
nota cómo en este momento la dirección muestra detalle cero.
Si hago clic a la derecha,
entonces eso se actualizará de dishdetail cero a dishdetail uno.
Ese cambio de parámetro, y eso hará que mi observable a
vaya a buscar el nuevo plato del servicio de platos.
Luego, se obtiene el nuevo plato,
la variable plato en mi componente se actualiza,
y cuando eso se actualiza,
mi vista también se actualiza.
Así que, note que estoy usando la misma vista,
soy capaz de navegar entre los diversos platos que son parte de mi lista de platos.
Esta es la parte interesante que puede obtener utilizando los parámetros
observables desde activator.service dentro de su aplicación Angular.
Interesante forma de hacer uso de cuentas observables nuestra aplicación Angular.
Por supuesto, la forma en que lo he implementado,
lo hice un poco de una forma artificial de hacer las cosas.
Tuve que conseguir la lista de identificaciones de platos.
Tuve que modificar el anterior y el siguiente y así sucesivamente.
Si tuvieras una forma de obtener el
anterior y el siguiente valor automáticamente de tu servicio,
cada vez que buscas un plato,
entonces la implementación de la puntuación será un poco más fácil.
Ahora mismo no tenemos eso.
Entonces, trabajé alrededor del problema porque solo quería ilustrar la forma
de usar un observable como este dentro de su aplicación Angular.
Si podemos implementar el servicio que devolverá el valor
anterior y el siguiente cada vez que tengamos un plato,
entonces todo este dolor de cabeza será mucho más simple resuelto.
Vamos a posponer esa idea para una etapa posterior.
Pero por el momento, ves cómo estamos haciendo
uso de los parámetros observables con el fin de implementar
una forma interesante de apoyar una nueva característica dentro de nuestra aplicación Angular.
Esto completa este ejercicio.
Este es un buen momento para que hagas un commit de git con el mensaje RXJS Parte dos.