Ahora que hemos examinado el enlace de datos,
vamos a hacer uso de ellos para
trabajando en la aplicación Angular que hemos estado utilizando hasta ahora.
En la versión anterior de la aplicación Angular,
teníamos el menú siendo renderizado,
y luego teníamos un plato específico que se mostraba en la parte inferior.
Ahora, idealmente nos gustaría que el usuario pudiera hacer clic
en cualquiera de los elementos del menú y luego los detalles que se mostrarán al usuario.
Aquí es donde el uso del enlace de datos nos ayudará
a implementar nuestra aplicación para habilitar este tipo de característica.
Pasando al estado actual de nuestra aplicación en el navegador,
ahora podemos ver que tenemos nuestro menú y en la parte inferior tenemos
los detalles de un plato específico que se muestra allí.
Ahora bien, esto es bueno para empezar, pero idealmente,
lo que nos gustaría tener es que si el usuario hace clic en cualquiera de estos platos,
queremos ser capaces de mostrar los detalles del plato en la parte inferior del menú aquí.
Por lo tanto, nos gustaría que los detalles del plato se cambiaran
en función de qué plato específico hacemos clic en cualquier momento.
Entonces, ¿cómo logramos esto?
Entonces, aquí es donde el uso del enlace de datos viene a nuestro rescate.
Ir a nuestra aplicación,
lo primero que voy a hacer es en la carpeta compartida,
ahora te das cuenta de que la información del plato se está usando
tanto en el componente de menú como en el componente de detalle del plato.
Ahora, cuando usted tiene información siendo compartida así,
sería más conveniente tener un lugar centralizado
desde el que esta información se suministra a ambos componentes.
Así que para ayudarme a hacer eso,
lo que voy a hacer es ir a la carpeta de recursos compartidos y luego crear un nuevo archivo,
y luego nombraré este archivo como dishes.ts.
Dentro de este archivo dishes.ts,
voy a crear la constante que proporciona los detalles de los platos.
Así que para hacer eso,
primero importaría el plato,
de la clase de plato
que ya he definido anteriormente.
Así que ahora, puedo definir una constante
llamada como platos del tipo una matriz de platos,
y entonces aquí es donde voy a almacenar los detalles de todos mis platos.
Ahora, en la versión anterior de la aplicación,
hemos visto el uso de los platos y vimos
la matriz de objetos JavaScript que contiene los detalles de los platos.
Ahora, vamos a mover todo ese contenido y con una versión actualizada del mismo.
Entonces, una versión actualizada de los platos
JavaScript object array se le da en las instrucciones,
así que simplemente vaya y copie
toda la matriz de objetos JavaScript desde allí y luego la pegaremos en su lugar aquí.
Por lo tanto, esto se convierte en la ubicación central desde la que
la información de los platos se suministra a su aplicación.
Ahora he cortado y pegado los detalles de
el plato que se dan en las instrucciones de ejercicio en su lugar aquí,
y así tengo cuatro platos pegados aquí uno,
dos tres, y cuatro platos pegados aquí,
y cada uno de esos platos contiene, por supuesto
los detalles del plato específico y también comentarios para el plato.
Ahora bien, de esta manera, la presentación de la información en
, la plantilla de detalle del plato se vuelve sencilla para cualquiera de estos platos elegidos.
Ahora, si retroceden verá que hay algunas líneas rojas aquí.
La razón de estas líneas rojas es porque cuando miras el objeto plato aquí,
verás que en el objeto plato no tenemos una propiedad allí llamada como comentarios.
Por lo tanto, necesitamos crear una nueva propiedad llamada
comentarios para agregar a ese plato aquí. Entonces, ¿cómo lo hacemos?
Así que para hacer eso, vamos a decir comentarios y
entonces yo diría comentarios array aquí.
Ahora inmediatamente te das cuenta de que no hay ninguna matriz de comentarios disponible para nosotros,
, así que necesitamos crear esa matriz de comentarios.
Entonces, lo que voy a hacer es crear otra clase de JavaScript
que contiene los detalles del comentario allí.
Así que para hacer eso, primero importaré el comentario de
la clase de comentario aquí.
Ahora, por supuesto, la línea roja inmediatamente me dice que no tengo una clase de comentario.
Entonces, ¿cómo añadimos una clase de comentario?
Así que yendo a la carpeta compartida,
vamos a crear un nuevo archivo llamado comment.ts y dentro de este comment.ts,
vamos a definir una clase llamada comment aquí.
Ahora, necesitamos definir ciertas propiedades para esta clase de comentario.
Entonces, ¿cuáles son las propiedades que tenemos?
Echemos un vistazo rápido a nuestro archivo dishes.ts
y luego veremos cuáles son las propiedades de cada comentario.
Al ir al archivo dishes.ts,
verá que los comentarios contienen
una propiedad llamada como una calificación que parece ser un número,
entonces usted tiene un comentario que es una cadena y
autor que es una cadena y una fecha que también es una cadena.
Entonces, necesitamos definir cuatro propiedades para mi clase de comentario aquí.
Entonces, volviendo a la clase de comentarios,
definiría la calificación como número.
Entonces, en script de tipo,
todo es un número aquí, entonces tuvimos un comentario que es un autor de cadena,
que también es una cadena,
y luego fecha que también es una cadena aquí.
Entonces, estas son las cuatro propiedades que tenemos aquí.
Ahora, obviamente hemos visto cómo usamos la cadena de fecha en el ejercicio anterior,
y en la asignación cómo hicimos uso de
la cadena de fecha para mostrar la fecha para el comentario allí.
Ahora, en caso de que se esté preguntando,
¿qué contiene realmente esta cadena de fecha?
Al ir aquí, verá que esta cadena de fecha tiene un cierto formato.
Por lo tanto, este es el formato estándar para almacenar una fecha aquí.
Este formato de fecha es la forma ISO OSI de especificar el formato de fecha.
Entonces, vamos a usar esto,
así que este es un formato estandarizado que se utiliza también en
muchos lenguajes de programación que le permite almacenar los datos como una cadena aquí,
así que voy a hacer uso de él como tal aquí.
Después de hacer los cambios en el archivo
dish.ts como este aquí y luego también agregar en la clase de comentario aquí,
ahora vemos que el archivo dishes.ts ya no tiene esas líneas rojas porque
el comentario se ha agregado como una matriz de objetos a mi clase dish aquí.
Por lo tanto, esto funciona bien hasta ahora.
Ahora, ¿cómo hacemos uso de esto?
Ahora para hacer uso de esto,
vamos a ir al menú component.ts,
y luego aquí tenemos esta constante definida aquí.
Ahora, esta no es la forma correcta de hacerlo
más adelante me verán usando un servicio para todo esto.
Así que, permítanme cortar esta constante de aquí completamente y en lugar de usar esa constante,
voy a importar ahora platos
de la carpeta compartida
aquí, platos compartidos aquí.
Por lo tanto, observe que esta carpeta de platos está exportando la constante de platos aquí.
Entonces, esa es la razón por la que somos capaces de hacer uso de ella.
Así que volviendo a los platos uno aquí,
necesito exportar esto desde aquí,
así que diría exportar.
Constante. Entonces, cuando hago eso,
entonces en mi componente de menú puedo ver que mis platos se pueden importar aquí correctamente.
Entonces, el resto del código aquí funcionará bien sin ningún cambio.
Verá que si guarda los valores ahora
y luego mira su aplicación web en el navegador,
se renderizará bien incluso después de estos cambios.
Después de guardar todos los cambios que has hecho hasta ahora en todos los archivos,
si vas y miras tu página web,
tu página web se renderiza como antes.
Ahora, la segunda parte del problema.
Queremos poder comunicarnos.
Cuando hacemos clic en cualquiera de estos elementos del menú,
queremos poder comunicar esa información para que
el plato correspondiente se represente aquí.
Así que, aquí es donde vamos a tomar la ayuda de
el enlace de datos que hemos aprendido hasta ahora.
Volviendo al archivo de plantilla de componentes de menú,
lo que vamos a hacer es que para
este «app-dishdetail» que incluimos en la parte inferior aquí,
para agregar en la plantilla de componentes de detalle de plato a la plantilla de componentes de menú,
vamos a añadir en una propiedad llamada como Dish.
Entonces, asignaremos esto a ser «SelectedDish».
Recordará que el plato seleccionado es una variable que tenemos
definido en nuestro menú componentes archivo TypeScript aquí.
Así que, de esa manera; ese valor de ese plato seleccionado será
pasado a través de este plato propiedad aquí.
Ahora, vamos a ver cómo el componente de detalle del plato puede recuperar esta información
y luego hacer uso de ella bien en el siguiente paso del ejercicio.
Ahora, mientras estamos aquí,
también solucionaremos el otro problema con el que tenemos que lidiar.
Es decir, cuando se hace clic en cualquiera de los elementos del menú,
entonces generará un evento de clic y queremos que esa información sea
entregada a nuestro archivo de componente de menú TypeScript.
Entonces, para hacer eso, entraremos en las listas de cuadrícula de menú que hemos definido aquí.
Para este mosaico de cuadrícula aquí,
lo que voy a hacer es definir el evento de clic aquí.
Entonces, para el evento click,
lo que voy a hacer es llamar al método
select que definiré dentro de mi archivo component.ts de menú.
Para este método onSelect,
voy a suministrar el plato como el parámetro aquí.
¿Qué es este plato?
Este plato es exactamente este plato que has seleccionado en
este «plato de platos» en la sintaxis ngFor aquí.
Entonces, ese plato específico,
fuera de la matriz de platos que ha seleccionado aquí,
se pasará como parámetro a este método onSelect,
lo que vamos a implementar en nuestro archivo component.ts de menú.
Así que, ahora que hemos hecho esto,
así que este es el controlador que necesita ser implementado.
Vamos al archivo de componente de menú y luego arregle
este archivo para implementar este controlador allí.
Por lo tanto, cuando haga un clic en cualquiera de los elementos del menú,
entonces se llamará al identificador correspondiente y
la información específica del plato se pasará como un parámetro aquí.
Al ir al archivo component.ts de menú, ahora,
al plato seleccionado se le asignará un valor basado en qué plato selecciono.
Entonces, voy a eliminar esa parte y luego justo debajo aquí,
voy a implementar el método onSelect aquí.
Entonces, para el método onSelect,
esto obtendrá un parámetro que es el parámetro dish.
Cuando llegue ese parámetro dish,
voy a asignar este SelectedDish igual a dish,
el parámetro que entró como el valor para el método onSelect aquí.
Así que, esto es todo.
Entonces, cuando haga clic en cualquiera de esos elementos en el menú,
cualquiera de los platos en el menú,
esa información del plato será pasada a través de esto y luego
el plato seleccionado será asignado a ese objeto plato aquí.
Ahora, tenemos cómo llega la información del DOM.
El clic específico hará que la información del plato a
esté disponible para nosotros y al plato seleccionado se le asignará ese valor.
Ahora, volviendo al archivo HTML del componente de menú,
vemos que ya hemos asignado esta propiedad de plato a SelectedDish.
Entonces, de esa manera, ese valor del plato seleccionado se está pasando
a través de esta propiedad del plato a esta aplicación dishdetail aquí.
Ahora, ¿cómo mi componente de detalle de plato obtiene esta información?
Para eso, vamos a ir al componente de detalle del plato y arreglarlo.
Al ir al componente de detalle del plato,
lo primero que voy a hacer es eliminar
esta constante del plato de mi componente de detalle del plato.
Ya no lo necesito.
Ahora, cuando una propiedad está siendo enlazada,
como lo que hemos visto en el archivo HTML del componente de menú,
luego en mi archivo de detalle plato,
puedo usar otro módulo llamado como el Módulo de entrada.
Entonces, para este plato,
simplemente voy a declarar eso como DISH.
Ahora, este módulo de entrada me permite declarar un decorador
para esta variable de plato que definí aquí,
así, en la entrada con el paréntesis aquí a ese plato aquí.
Entonces, también, necesito importar
la clase de plato
del plato compartido aquí.
Entonces, con esto, entonces lo que ha sucedido es que estoy haciendo uso del módulo de entrada.
Por lo tanto, esta es una forma de proporcionar información a un componente desde otro componente.
Enlaza una propiedad en la plantilla de
el otro componente como vimos en el archivo component.html de menú,
y luego estará disponible como entrada a este componente mediante
declarando una variable y luego llamando al decorador de entrada para eso.
Ahora, con esto, vamos a guardar los cambios en todos los archivos que hemos hecho
y luego echar un vistazo a la replicación angular.
Al ir a nuestro navegador,
vemos que en esta replicación angular,
nada se muestra aquí.
Porque en este momento, el plato seleccionado,
no hemos seleccionado ninguno de los platos por lo que también el plato seleccionado
es un objeto vacío allí.
Por lo tanto, usamos el nGIF en la plantilla para el detalle del plato.
Así que, echando un vistazo rápido a la plantilla de detalles del plato,
has implementado esto como parte de tu tarea.
Entonces, deberías haber usado el nGIF con el plato tanto para el código,
como para la lista MD allí.
Entonces, si haces eso,
entonces cuando el plato está actualmente sin seleccionar,
entonces nada se mostrará en la parte inferior.
Pero en el momento en que haga clic en cualquiera de los platos,
entonces inmediatamente ve los detalles del plato que se muestra en la parte inferior aquí.
Ahora puedo seleccionar el segundo plato y luego inmediatamente,
notarás que los detalles del plato que se muestran a continuación se cambian.
Así que, cada vez que haga clic en cualquiera de estos platos,
los detalles de ese plato específico,
incluyendo los comentarios se mostrarán en la parte inferior aquí.
Por lo tanto, esto es exactamente lo que queremos lograr en este ejercicio particular.
Así que, aquí, usted ha visto el uso de enlace de datos, tres tipos diferentes,
incluyendo el controlador de eventos y eventos,
y también vio cómo podemos hacer uso del módulo de entrada para poder
para recuperar información en un componente procedente de otro componente.
Con esto, completamos este ejercicio,
donde hemos aprendido a hacer uso de varias funciones de enlace
de datos disponibles en Angular para implementar nuestra aplicación.
Este es un buen momento para que realice una confirmación de git con el enlace de datos del mensaje.