Post Top Ad

Your Ad Spot

jueves, 8 de octubre de 2020

Enlace de datos angular

 

El enlace de datos en AngularJS es bastante similar a otras bibliotecas populares como React y Vue. Es la sincronización automática de datos entre el modelo y los componentes de la vista. Con este enfoque, el desarrollador trata el modelo como la única fuente de verdad en la aplicación. La vista siempre actuará como una proyección del modelo. De esta forma, si el modelo cambia, la vista se actualiza automáticamente y viceversa. En este tutorial, veremos algunos ejemplos de cómo funciona el enlace de datos en Angular.


¿Qué es el enlace de datos en angular?

El enlace de datos es un tipo de comunicación en Angular. En Angular, tiene un código TypeScript que contiene la lógica empresarial y una plantilla que se compone de HTML. En el código TypeScript, tal vez se hizo un cálculo o algunos datos se bajaron de un servidor y ahora están listos para mostrárselos al usuario. Se trata de datos dinámicos, y esos datos dinámicos se pueden configurar para enlazar con propiedades en la plantilla para que el usuario final pueda verlos. De hecho, esta comunicación puede ocurrir en ambos sentidos, y este diagrama nos muestra cómo.
enlace de datos angular


Interpolación de cadenas

Primero veremos la interpolación de cadenas. Imagina que nuestra máquina virtual tiene algunos datos que la describen. Puede tener un nombre, estado y tiempo de actividad. Podemos representar esos datos en el archivo virtual-machine.component.ts así.

Ahora, podemos usar la interpolación de cadenas para mostrar estos datos dinámicos en la plantilla. El archivo virtual-machine.component.html ahora se actualiza para generar dinámicamente los datos. Angular usa las llaves dobles especiales para este {{}} . Esto le dice a Angular que lo que hay entre las llaves dobles es variable, y que inspeccione esos datos y los muestre.

interpolación de cuerda angular


Vinculación de propiedad

Otra forma de trabajar con datos es mediante el enlace de propiedad. Para vincular una propiedad en un archivo de plantilla a datos en el archivo TypeScript, puede usar la notación entre corchetes [] . Cuando envuelva la propiedad con los corchetes, Angular sabrá asociar esa propiedad con los datos nombrados en el archivo del componente de TypeScript. Considere este marcado en virtual-machines.component.html .

La disabledpropiedad está vinculada a la variable allowNewVm en virtual-machines.component.ts .

Además, tenemos una función de flecha simple en el constructor que establece esta variable en verdadera después de 1,5 segundos. Lo que esto debería darnos es un botón deshabilitado en la carga de la página, pero dos segundos después el botón debería activarse.

Cuándo utilizar el enlace de propiedades y la interpolación de cadenas

En el ejemplo de enlace de propiedad anterior, se estaba comprobando un valor booleano para ver si una propiedad debería estar habilitada o no. Este es un caso de uso perfecto para la vinculación de propiedades. Para los casos en los que realmente desee enviar esos datos a la pantalla, la interpolación de cadenas puede tener sentido. De hecho, solo para darnos una mejor idea de cómo funciona esto, mire este archivo y la salida resultante.

Puede ver en el resultado anterior que a medida que la allowNewVmvariable cambia entre verdadero o falso, también lo hace el estado habilitado o deshabilitado del botón. ¡Frio!

Esto también podría lograrse vinculando datos a la propiedad innerText de esta manera.

El resultado es el mismo. Como originalmente teníamos una etiqueta <b> envolvente alrededor de {{allowNewVm}}, podemos simplemente eliminar las llaves y usar ese enlace innerText. Esto se debe a que innerText se refiere al espacio entre una etiqueta html de apertura y cierre.

Sin embargo, en general, si desea generar algo en la plantilla, siga adelante y use String Interpolation. Si desea cambiar la propiedad de un elemento, directiva o componente html, entonces debe usar Property Binding. No mezcle los dos enfoques juntos. A continuación, aprenderemos sobre la vinculación de eventos angular.



No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas