[MUSIC]
Si tienes un sitio web estático,
entonces tienes todos los datos que necesitas para construir tu sitio web.
Y será creado una vez y su sitio web está listo para funcionar.
Pero muchos sitios web en estos días son impulsados por datos del backend.
Su aplicación web recuperará datos de un servidor back-end y
los usará para diseñar dinámicamente el contenido en su sitio web, o
incluso actualizará el contenido en su sitio web.
Entonces, esto requiere que los datos fluyan desde el back-end a través de
su aplicación web al DOM.
Y cualquier interacción del usuario en el DOM debe transmitirse de nuevo a su aplicación web.
Entonces esto requiere la comunicación entre el DOM y
su componente en el marco angular, por ejemplo.
Veamos cómo sucede esto dentro del marco angular y
con un poco más de detalle.
Lo que hemos aprendido hasta ahora es cómo se prepara un componente.
Así que vimos que el componente tiene dos partes principales, el archivo mecanografiado
donde se define la arquitectura del componente, y las propiedades.
Y los métodos de y luego tiene la plantilla que
define cómo se presenta el contenido y se agrega al DOM.
Así que la plantilla es la que va a suministrar por un componente a
ocupar una parte de su página web.
Así que la plantilla forma el medio de comunicación a su DOM.
Y esta plantilla requiere que se obtengan datos de su componente en orden
para representar partes del contenido en su plantilla y
correspondientemente dentro del DOM de su página web.
Ahora, si no tuviste el lujo de un framework como Angular,
tienes que lidiar con todos los detalles sobre cómo
los datos fluyen desde el sitio de la aplicación al DOM.
Y cómo los eventos de interacción del usuario que causó en
el DOM serán enviados de vuelta a su aplicación.
Afortunadamente, con marcos funciona como Angular,
admiten todos estos comportamientos inherentemente.
Ahora ya hemos visto un uso del flujo de datos desde una propiedad de componentes
a la plantilla en los ejercicios anteriores.
Donde usamos las llaves dobles para proporcionar información que
es de una variable en el código TypeScript de su componente, a su plantilla.
Veremos otras maneras, y
luego también en el ejercicio que sigue, haremos uso de esto,
para modificar la aplicación angular que hemos estado desarrollando hasta ahora.
Lo que hemos estado hablando, hasta ahora, es enlace de datos,
un mecanismo para coordinar el flujo de información entre la plantilla y
el componente, o entre el DOM y el componente.
En el nivel de componente, es algún tipo de propiedad o
un método que debe suministrarse a la plantilla o invocarse desde el DOM.
O en el lado de la plantilla, puede ser cierta información
que la plantilla requiere para ser renderizada en el DOM o
incluso desde el DOM capturado y enviado de vuelta a su componente.
Entonces, todo esto requiere que los datos fluyan desde el componente a
la plantilla o eventos que se recopilan desde el DOM o
se envíen de vuelta a su componente para que actúe sobre esos eventos.
Ahora esto se puede manejar fácilmente en un marco angular usando cuatro tipos
diferentes de flujo de información que resumiremos en la siguiente diapositiva.
Volviendo a la interacción entre el componente y la plantilla,
ya hemos visto el primer tipo de interacción entre el componente y
la plantilla donde el valor de una propiedad fluía en la plantilla.
Así que vimos el uso del nombre del plato,
la descripción del plato, los detalles del comentario del plato y así
en ser suministrado con el fin de proporcionar información en su plantilla.
Así que ahí es donde estábamos usando las llaves dobles para incluir el hecho de que
un valor de su componente se está utilizando en su plantilla.
Otro tipo de flujo de información que verá es donde
especifica algún tipo de propiedad asociada con una etiqueta entre corchetes.
Y luego asígnelo como el valor de una de las propiedades en su componente.
Este tipo de enfoque veremos en el ejercicio que sigue a
justo después de esta conferencia.
Así que aquí especificaríamos algo entre corchetes.
Así que ten cuidado con
un ejemplo de eso en el ejercicio donde voy a discutir más sobre esto.
Del mismo modo, si tiene un evento generado cerca de DOM,
ese evento puede resultar en la llamada a un controlador o
un método En su componente que se encargará de manejar este evento.
Entonces, los métodos que van a ser invocados por
los eventos de su DOM se conocen como manejadores.
Entonces, el mango no es más que, como dije, un método, que también podría
se pasa en algún parámetro dentro de los métodos de controlador allí.
Más adelante, cuando miremos los formularios, veremos un enlace de datos bidireccional.
Así que los tres que hemos visto hasta ahora, el flujo del valor de
el componente a la plantilla o la propiedad que se asigna a un valor o
el evento que se asigna a un controlador para manejar el evento.
Todos estos son lo que nos referimos como enlaces de datos de una sola manera porque
fluyen solo en una dirección.
También puede tener flujo bidireccional donde también podría verlo
en la sintaxis lo que especificaría con corchetes.
Y luego encerrado dentro de eso con paréntesis estándar.
Un dentro de allí especificará algo así como un ngModel.
Verá el uso de esto cuando se forme más adelante en el siguiente módulo.
Así que aquí es donde asignarás una propiedad a eso.
Entonces, en este caso, el flujo de información es bidireccional.
Por lo tanto, cualquier cambio en su DOM se reflejará de nuevo en su propiedad y
el componente.
Cualquier cambio en la propiedad del componente se reflejará de nuevo en el DOM.
Tenga en cuenta la sintaxis específica que usamos para
especificando el modelo ngModel en este ejemplo aquí.
Usamos un corchete cuadrado y dentro de eso usamos el paréntesis estándar allí.
Permítanme ahora resumir lo que acabamos de aprender acerca de
el enlace de datos en la diapositiva anterior en esta tabla.
Así que en esta tabla, estamos mostrando las diferentes formas en que se utiliza el enlace de datos.
Enlace de datos unidireccional desde el origen de datos al destino de la vista, por lo que
desde el componente al DOM,
estamos usando una expresión de doble llave dentro de allí.
Esto es lo que nos referimos como Interpolación como ejemplo de la cual,
sería el nombre del plato, encerrado dentro de las llaves dobles como hemos visto,
utilizado en los ejercicios, en el módulo anterior.
Entonces tenemos, el segundo tipo donde encierra el objetivo
dentro de un corchete cuadrado y luego lo asigna a una expresión en el lado derecho.
Estas expresiones podrían ser expresiones JavaScript con algunas limitaciones.
Los ejemplos que normalmente veremos serían
usando una propiedad de una de las clases allí.
Por lo tanto, esto es lo que nos referimos como un atributo de propiedad, y
ejemplo de los cuales verá en el ejercicio que sigue a esta conferencia.
Donde verías el uso de un plato, encerrado dentro de un corchete cuadrado,
siendo equiparado a un SelectedDish, que es una variable declarada dentro de un componente.
Esto también se puede expresar usando un enlace target,
una forma de expresar lo mismo.
Así que ambos, ya sea que encierra un objetivo entre corchetes o destino enlazado.
Entonces, por ejemplo, se puede ver bind-dish.
Así que cualquiera que sea la forma en que expreses esto, ambos se refieren a lo mismo.
Por lo tanto, se especifica el atributo de propiedad o se especifica el estilo de clase.
Ahora el flujo unidireccional de información desde el objetivo de vista a
la fuente de datos generalmente se expresa con el objetivo encerrado
entre paréntesis aquí o también se puede expresar como en destino.
Y en el lado derecho sería una declaración.
Una declaración podría ser algún tipo de expresión JavaScript normalmente
estaría en la invocación de un método dentro de un componente.
Bueno, verá un ejemplo en el ejercicio que sigue donde
habría clic dentro del paréntesis y asignado a onSelect.
Que es un método descrito dentro de una clase
componente allí con un plato de parámetros que se suministra a este método allí.
El enlace de datos bidireccional como vimos sería con escudero y paréntesis,
escudero paréntesis y paréntesis que se equipara a una expresión.
Veremos el enlace de datos bidireccional como un conjunto con formularios un poco más tarde donde
usará algo así como un ngModel, encerrado dentro de los corchetes y
paréntesis, equiparado a algo así como dish.name.
Que conecta el elemento de formulario a una propiedad de
un objeto JavaScript, en nuestro componente.
También puede expresar esto como bindon-target.
Que es otra forma de decir lo mismo.
Ahora, este enlace de datos bidireccional que hacemos es a veces
jocularmente referido como un plátano en una caja.
Así que si nos fijamos en los corchetes con el paréntesis dentro,
parece un plátano en una caja.
Por lo tanto, usted podría ver esto siendo usado en alguna de la documentación o
en algunos de los blogs que usted podría leer en Internet.
Ampliando aún más los objetivos vinculantes que hemos visto,
los objetivos vinculantes son las propiedades que se declaran en el lado izquierdo
de la declaración vinculante de esa declaración de enlace de datos.
Normalmente, encerrado dentro de corchetes o entre paréntesis o ambos.
Así que el lado derecho de la expresión de enlace son sus fuentes de enlace,
por lo que normalmente son como las propiedades de un objeto JavaScript, o
una variable, o una expresión que definimos en el lado derecho.
Si define propiedades de destino asociadas con el selectivo de un componente.
Esa es una forma de pasar información a un componente,
o enviar información de un componente a otro componente.
Así que esto facilita la comunicación entre componentes.
Así que vería el uso de un decorador como @Input asociado con
una forma de enviar información de un componente a otro componente.
Veremos un ejemplo de este uso en el ejercicio
que sigue a esta conferencia aquí.
Del mismo modo, puede utilizar el decorador de salida para especificar un evento
de un componente que se pasa de nuevo a otro componente.
Por lo tanto, ambos usos se utilizan efectivamente para la comunicación entre componentes.
[MÚSICA]