Enlace de datos en angular explicado

El enlace de datos

Motivación

Los datos suelen definir el aspecto de una aplicación. La interpretación de esos datos en la interfaz de usuario implica una lógica de clase ( .component.ts) y una vista de plantilla ( .component.html). Angular los conecta a través del enlace de datos. Piense en el enlace de datos como una herramienta para la interacción de componentes.

Componente y plantilla

El componente almacena la mayor parte de su lógica y datos dentro de su clase decorada con @Component. Este decorador define la clase como un componente con plantilla HTML. La plantilla del componente representa la clase dentro de la aplicación. El enfoque aquí debe estar entre la clase del componente y la plantilla HTML.

Aquí es donde se produce el enlace de datos. Las propiedades de los elementos y los eventos reciben valores asignados. Estos valores, definidos por la clase de componente, cumplen una de dos funciones. Uno es producir datos que luego recibe la plantilla. El otro maneja los eventos emitidos por el elemento de plantilla.

Ejemplo de código

Intente utilizar esta imagen como modelo mental para la siguiente sección.

Direcciones de encuadernación

Hay dos formas de vincular los datos: unidireccional y bidireccional. Angular técnicamente solo usa flujo de datos unidireccional. El flujo bidireccional es, en última instancia, unidireccional. Ocurre en dos aplicaciones de flujo unidireccional, una para cada dirección. Más sobre eso más tarde.

El flujo unidireccional define la interacción unidireccional. O el componente envía datos a la plantilla o la plantilla emite un evento a la lógica del componente. Los cambios de datos dentro del alcance de la plantilla no se filtran a la clase de componente. La emisión de eventos es una transacción unidireccional que comienza con los elementos de la plantilla.

Bidireccional constituye ambas direcciones. Esto significa que los cambios en los datos en la lógica de clase o en la plantilla HTML persisten entre sí. El alcance de los cambios es la vista del componente. La vista comprende la clase y la plantilla del componente juntas.

Propiedades del elemento

Para reconocer las propiedades de los elementos enlazados a datos, Angular usa una sintaxis de corchetes especial.

// my.component.ts @Component({ templateUrl: './my.component.html' }) export class MyComponent { value:type = /* some value of type */; }
 innerHTML

Tenga paciencia conmigo en este.

[property]refleja la propiedad en el nodo de objeto del elemento del modelo de objetos de dominio (DOM). No confunda las propiedades del objeto con los atributos de un elemento DOM. Las propiedades y los atributos a menudo comparten el mismo nombre y hacen lo mismo. Sin embargo, hay una distinción clara.

Recuerde que attr(atributos) es una propiedad única del objeto DOM subyacente. Se declara en la instanciación del DOM con valores de atributo que coinciden con la definición del elemento. Mantiene el mismo valor después de eso. Cada una de las propiedades tiene su propio campo de valor-clave en un nodo de objeto DOM. Estas propiedades son mutables después de la instanciación.

Conoce la diferencia entre atributos y propiedades. Conducirá a una mejor comprensión de cómo Angular une los datos a las propiedades (enlace de propiedad). Angular casi nunca vinculará datos a los atributos de un elemento. Las excepciones a esto son muy raras. Una última vez: Angular vincula los datos de los componentes a las propiedades, no a los atributos.

Volviendo al ejemplo, la [ … ]asignación de propiedad del elemento tiene un significado especial. Los corchetes muestran que propertyestá vinculado a “value”la derecha de la tarea.

valuetambién tiene un significado especial dentro del contexto de los corchetes. valuepor sí mismo es una cadena literal. Angular lo lee y compara su valor con los miembros de la clase del componente. Angular sustituirá el valor del atributo de miembro correspondiente. Por supuesto, esto se refiere a la misma clase de componente que aloja la plantilla HTML.

El flujo unidireccional de datos desde el componente hasta la plantilla está completo. El miembro comparado con la asignación correcta de la propiedad entre corchetes proporciona el value. Tenga en cuenta que los cambios en el valor del miembro en la clase de componente se filtran a la plantilla. Esa es la detección de cambios de Angular en funcionamiento. Los cambios dentro del alcance de la plantilla no tienen ningún efecto en el miembro de la clase del componente.

Conclusión clave: la clase de componente proporciona los datos mientras la plantilla los muestra.

No mencioné que los valores de datos también pueden aparecer en un componente innerHTML. Este último ejemplo implementa llaves dobles. Angular reconoce estas llaves e interpola los datos de la clase de componente coincidente en innerHTMLel div.

 The value of the component class member ‘value’ is {{value}}. 

Manejo de eventos

Si el componente proporciona datos, la plantilla proporciona eventos.

// my.component.ts @Component({ templateUrl: './my.component.html' }) export class MyComponent { handler(event):void { // function does stuff } }
// my.component.html innerHTML

Esto funciona de manera similar a la vinculación de propiedad.

Las (event)refiere a cualquier tipo de evento válido. Por ejemplo, uno de los tipos de eventos más comunes es click. Emite cuando hace clic con el mouse. Independientemente del tipo, eventestá vinculado “handler”en el ejemplo. Los controladores de eventos suelen ser funciones miembro de la clase de componente.

El ( … )son especiales para angular. Los paréntesis le dicen a Angular que un evento está limitado a la asignación correcta de handler. El evento en sí se origina en el elemento anfitrión.

Cuando el evento emite, pasa el objeto Event en forma de $event. Los handlermapas a la handlerfunción con el mismo nombre de la clase de componente. El intercambio unidireccional del elemento vinculado al evento a la clase de componente está completo.

La emisión de eventos desde el controlador, aunque es posible, no afecta al elemento de plantilla. La unión es unidireccional después de todo.

Encuadernación bidireccional

Los formularios de entrada proporcionan un gran ejemplo de por qué es necesaria la vinculación bidireccional. Los enlaces de datos bidireccionales son más costosos que los enlaces de eventos o propiedades.

Bidirectional data binding has its own module. Before taking a look at that, consider the following example.

// my.component.ts @Component({ templateUrl: './my.component.html' }) export class MyComponent { inputValue:string = ""; handler(event) { this.inputValue = event.target.value; } }

Time to break this down.

This example combines the previous two. That explains why it is more costly. Following the logic, assume the user types something into the input element. The element emits an input event to the handler of the template’s component class. The handler assigns the class member inputValue to the value of the emitted event. This concludes the event handling/binding.

Now onto the property binding. The inputValue was assigned a new value. Since inputValue is bound to the input element’s value, its change in data percolates down into the input element’s value property. The input element’s value matches up with inputValue. This concludes the property binding.

There you have it. Bidirectional data binding happens with both applications of unidirectional binding applied consecutively. The syntax is a bit messy though.

Thankfully, Angular provides NgModel to simplify the syntax. The below example is synonymous to the above.

// my.component.ts @Component({ templateUrl: ‘./my.component.html’ }) export class MyComponent { inputValue:string = ""; }

ngModel is a nice convenience. You have to import the FormsModule in your application’s root before using it. With that squared away, bidirectional data binding becomes much easier to work with.

To reinforce all you have learned, check out this picture from the official Angular Documentation1.

Diagrama de flujo de datos

You can visually summarize everything up until this point with this picture. Angular’s Documentation has plenty of other pictures worth seeing. This one should suffice given the scope of this article.

Component to Component

To bind data and events across different components, you must use the @Input and @Output decorators. Angular components are privately scoped. None of a component’s members are accessible from anywhere outside of its native view.

The @Input decorator indicates a member’s value is sourced from the parent function. This requires visualization to better understand.

Ejemplo de código

Notice the passing of the parent’s value member into the child’s property member. This would not be possible if property had no @Input decorator. The Angular compiler depends upon it.

Another example for @Output shows how an event travels from child to parent. Keep in mind that @Output almost always pertains to custom event bindings.

Ejemplo de código

Asegúrese de importar EventEmitter, @Inputy @Outputde @angular/commonsi tiene la intención de replicar alguno de estos ejemplos.

Conclusión

Este es un buen lugar para detenerse. El enlace de datos abarca una amplia gama de casos de uso. Vale la pena explorar más este tema en el sitio web de Angular. Estas no son las únicas formas en que puede manipular datos en Angular. Consulte los enlaces en Recursos para obtener más información.