¡Conozca los entresijos del enlace de datos Angular con nuestro tutorial completo! Desde enlace bidireccional hasta enlace de eventos, lo tenemos cubierto. Comience a crear aplicaciones web dinámicas hoy.
Angular es un marco de JavaScript popular que se utiliza para crear aplicaciones web. Fue desarrollado por Google y lanzado por primera vez en 2010. Según la Encuesta para desarrolladores de Stack Overflow de 2021 , el 26,36% de los desarrolladores utiliza Angular. Angular es conocido por sus potentes funciones y beneficios, como el enlace de datos bidireccional, la inyección de dependencia y la arquitectura basada en componentes.
Este artículo tiene como objetivo proporcionar una guía completa para los desarrolladores que quieran dominar los enlaces angulares. Vincular datos en Angular es un concepto crítico que permite a los desarrolladores sincronizar datos entre el componente y la vista en tiempo real. Los desarrolladores pueden crear aplicaciones más dinámicas y receptivas al comprender e implementar el enlace de datos de manera efectiva.
Este artículo cubrirá los diferentes tipos de enlaces de datos en Angular, incluidos los enlaces unidireccionales, bidireccionales y de eventos. También proporcionará consejos y mejores prácticas para optimizar el rendimiento y evitar errores comunes.
¿Qué es el enlace de datos?
Los componentes son los principales componentes básicos de la aplicación, ya que tienden a gestionar las operaciones de datos y el comportamiento de la aplicación, mientras que el modelo es responsable de representar los elementos HTML de cualquier diseño y estructura de la interfaz de usuario que se le envíe.
Un componente y una vista deben estar conectados para que la aplicación funcione correctamente. El enlace de datos entra en escena cuando hay una conexión entre datos. Es una parte vital de una aplicación Angular porque proporciona sincronización automática entre el componente y la vista. Curiosamente, Angular ofrece varias formas de vincular datos.
Imagínese si el enlace de datos no existiera. En este caso, los desarrolladores, incluidos aquellos involucrados en la subcontratación del desarrollo de Angular, tendrían que escribir manualmente una lógica compleja para actualizar las vistas cada vez que se produzca un cambio. El enlace de datos ha automatizado el proceso y ha facilitado a los desarrolladores, especialmente aquellos que subcontratan el desarrollo de Angular, la creación de aplicaciones interactivas.
Importancia del enlace de datos en aplicaciones angulares
Veamos algunos beneficios del enlace de datos en Angular que lo convierten en una característica importante.
| Beneficiarse | Descripción |
| Mantenibilidad | La base del código se reduce a medida que se reduce el código repetitivo necesario para administrar la vista y el modelo. |
| Eficiencia | Dado que el proceso ahora está automatizado, la necesidad de actualizar manualmente el DOM es redundante, lo que permite realizar actualizaciones más rápidas. |
| Legibilidad del código | Es probable que los desarrolladores cometan menos errores ya que el código ahora es más fácil de leer y comprender. |
Tipos de enlace de datos angulares
Ahora, profundicemos en los diferentes tipos de enlaces en Angular en esta sección. Para esta guía, usaremos la versión 15 de Angular.
Interpolación
El tipo más importante de datos vinculantes es la interpolación. Permite a los desarrolladores mostrar dinámicamente los valores de los componentes en el modelo. Una variable se define en el componente y se llama en el modelo. Angular encuentra la variable en la clase de componente correspondiente a la llamada en la plantilla y luego muestra los valores dinámicamente. Está representado por llaves dobles ( {{ }} ). Puedes usar números, cadenas, etc. directamente entre paréntesis dobles. Veamos un ejemplo.
En la clase de componente:
nombre="Juan Pérez";
En el modelo:
<p>¡Bienvenido, {{ name }} !</p>
Vinculación de propiedad
El enlace de propiedades utiliza las propiedades o atributos del DOM y los vincula a las propiedades del componente. Esto permite que el componente actualice dinámicamente las propiedades DOM. Para utilizar el enlace de propiedades, los desarrolladores utilizan corchetes ( ) en la plantilla, seguidos del nombre de la propiedad DOM a la que está enlazado y el nombre de la propiedad del componente entre comillas.
Veamos un ejemplo para comprender cómo se implementa el enlace de propiedades.
En la clase de componente:
exportar clase AppComponent {
imgUrl="
}
En el modelo:
<img (src)="imgUrl" alt="Una imagen">
Aquí el enlace de propiedad se utiliza para vincular el atributo src del elemento img a la propiedad imgUrl del componente. Por lo tanto, la imagen mostrada en el elemento img cambiará dinámicamente según el valor de la propiedad imgUrl.
Puede vincular atributos deshabilitados, href, clase y similares mediante el enlace de propiedades.
Vinculación de eventos
El enlace de eventos le permite manejar eventos que ocurren en el DOM, como clics de botones o movimientos del mouse, y realizar funciones en el componente.
Para vincular un evento DOM a un método de componente, utilice la sintaxis entre paréntesis:
<button (click)="myFunction ">¡Haz clic en mí!</button>
En este ejemplo, el evento (clic) está vinculado al método myFunction en la clase de componente. Al hacer clic en el botón, se ejecutará el método myFunction.
Aquí hay otro ejemplo que muestra cómo pasar un objeto de evento al método:
<button (mousemove)="onMouseMove($event)">¡Mueve el ratón sobre mí!</button>
El objeto $event se pasa al método onMouseMove en la clase de componente, que luego se puede usar para acceder a información sobre el movimiento del mouse y el evento de destino.
Enlace de datos bidireccional
La sincronización bidireccional de datos entre el componente y un modelo se conoce como enlace bidireccional. Esto significa que cada vez que cambian los datos en el modelo, el componente se actualiza en consecuencia y cada vez que se actualiza el componente, el modelo también se actualiza.
La directiva ngmodel se utiliza para implementar el enlace bidireccional. Vincula el valor del elemento de entrada a una propiedad del componente y viceversa. La directiva ngmodel es parte de FormModule; por lo tanto, se debe importar al AppModule antes de poder usarlo.
Miremos el siguiente ejemplo para ver cómo se usa aquí la directiva ngmodel para el enlace de clases bidireccional.
<input ((ngModel))="nombre" marcador de posición="Ingrese su nombre">
<p>¡Hola {{name}} !</p>
La propiedad del nombre del componente está vinculada al valor del campo de entrada mediante la directiva ngmodel. Esto significa que cualquier cambio realizado en el campo de entrada actualizará automáticamente el valor de entrada en la propiedad del nombre y cualquier cambio realizado en la propiedad del nombre se reflejará en el campo de entrada.
Tenga en cuenta que para que la directiva ngmodel funcione, también debe proporcionar un atributo de nombre para el elemento de entrada. Vea el siguiente ejemplo.
<input ((ngModel))="nombre" nombre="nombre" marcador de posición="Ingrese su nombre">
Ahora, pasemos a técnicas más avanzadas que se pueden implementar en una aplicación Angularjs.
Técnicas avanzadas de enlace de datos
Uso de RxJS y observables con enlace de datos
Los observables manejan flujos de datos asincrónicos y administran eficientemente el flujo de datos en una aplicación Angular. RxJS es una biblioteca que se utiliza junto con Observables para componer funcionalidades asincrónicas.
Para tratar con Observables, se utiliza una tubería asíncrona. La canalización asíncrona se suscribe a un Observable y se cancela automáticamente cuando se destruye el componente. Este comportamiento evita pérdidas de memoria y facilita la gestión de suscripciones.
Veamos un ejemplo para implementar Observables usando RxJ.
importar {Componente, OnInit} desde '@angular/core';
importar {Observable} desde 'rxjs';
@Componente({
selector: 'ejemplo de aplicación',
plantilla: `
<h1>Valor actual: {{ value$ async }} </h1>
<button (click)="updateValue ">Actualizar valor</button>
`
})
clase de exportación Componente de ejemplo implementa OnInit {
valor$: Observable<número>;
ngOnInit {
// inicializa el Observable
this.value$ = nuevo Observable(observador => {
sea yo = 0;
establecerIntervalo( => {
observador.siguiente(i++);
}, 1000);
});
}
actualizarValor {
// actualiza el valor del Observable
// esto se reflejará en la plantilla a través del canal asíncrono
this.value$ = nuevo Observable(observador => {
sea yo = 10;
establecerIntervalo( => {
observador.siguiente(i--);
}, 1000);
});
}
}
El componente de ejemplo con un valor $Obervable proporciona un número cada segundo. La tubería asincrónica en el modelo se utiliza para mostrar el valor actual del Observable.
Un botón en el archivo HTML actualiza el valor Observable$ para mostrar datos con los números actualizados. Esto se refleja automáticamente mediante el uso de un canal asíncrono.
Carga dinámica de componentes
Para lograr una arquitectura más flexible y modular, utilizamos componentes dinámicos. Los componentes dinámicos le ayudan a crear y cargar componentes en tiempo de ejecución. Para cargar dinámicamente un componente, es necesario crear una instancia de una clase ComponentFactoryResolverClass. Luego, el componente se agrega a la vista del componente host utilizando la clase ViewContainerRef.
Los decoradores @Input y @Output se utilizan para vincular dinámicamente datos entre el componente host y el componente cargado dinámicamente. Veamos los ejemplos de código a continuación para ver cómo vincular datos dinámicamente.
- Cree el componente cargado dinámicamente.
importar {Componente} desde '@angular/core';
@Componente({
selector: 'componente-dinámico-aplicación',
plantilla: `
<p>¡Componente dinámico cargado!</p>
<p> {{dynamicData}} </p>
`
})
exportar clase DynamicComponent {
@Input datos dinámicos: cadena;
}
- Utilice las clases ComponentFactoryResolver y ViewContainerRef en el componente host para cargar el componente dinámico.
importar {Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } desde '@angular/core';
importar {DynamicComponent} desde './dynamic.component';
@Componente({
selector: 'componente-host-aplicación',
plantilla: `
<div #contenedor></div>
`
})
exportar clase HostComponent {
@ViewChild('contenedor', { leer: ViewContainerRef }) contenedor: ViewContainerRef;
constructor (componente privadoFactoryResolver: ComponentFactoryResolver) {}
loadDynamicComponent (datos dinámicos: cadena) {
este.contenedor.claro;
const componenteFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
const componenteRef = this.container.createComponent(componentFactory);
componenteRef.instance.dynamicData = datos dinámicos;
}
}
- Utilice la canalización asincrónica para manipular datos de Observables y llame a loadDynamicComponent en la plantilla del componente host para cargar dinámicamente el componente y vincular los datos.
<div *ngIf="datos dinámicos$ async como datos dinámicos"> <button (click)="loadDynamicComponent(dynamicData)">Cargar componente dinámico</button> </div>
En el siguiente código,dynamicData$ es un Observable que proporciona los datos que se pasarán al componente cargado dinámicamente. Tan pronto como el usuario hace clic en el botón, se llama al método loadDynamicComponent con los datos y el componente dinámico se carga con los datos pasados en consecuencia.
Comprender la detección de cambios angulares
La función de detección de cambios de Angular monitorea los atributos de un componente y, si es necesario, actualiza la vista para reflejar las modificaciones.
Para maximizar el rendimiento de las aplicaciones vinculadas a datos, es fundamental comprender cómo funciona, ya que permite a los desarrolladores evitar realizar cambios innecesarios en la visualización.
De forma predeterminada, cada vez que un usuario realiza un cambio en Angular, se vuelve a escanear todo el árbol de componentes y se actualizan las vistas. Angular puede verificar estos cambios de diferentes maneras y puede usarse para controlar cómo Angular verifica los cambios.
La estrategia predeterminada se puede cambiar a onPush, que verifica el tipo de entrada y cambia solo cuando las propiedades de entrada cambian o se activa un evento.
Otra estrategia que podría implementarse es un estándar inmutable. El patrón siempre crea nuevos objetos y matrices en lugar de modificar los existentes, lo que permite a Angular detectar cambios de manera más eficiente.
Enlace de datos y directivas angulares
Directivas estructurales y vinculación de datos
El DOM se puede manipular dinámicamente utilizando las directivas estructurales ngIf y ngFor. Estas directivas determinan qué mostrar en el modelo y están estrechamente relacionadas con el enlace de datos.
Por ejemplo, la directiva ngIf se utiliza para representar condicionalmente el contenido de la plantilla en función de una expresión booleana. Veamos la implementación:
<div *ngIf="mostrar mensaje"> <p>¡Hola mundo!</p> </div>
En el código anterior, la directiva *ngIf está vinculada a la propiedad showMessage del componente. Si showMessage es verdadero, solo entonces los elementos HTML div y su contenido se representarán en el DOM.
La directiva ngFor se utiliza para representar una lista de elementos del modelo. Veamos el siguiente extracto.
<ul>
<li *ngFor="dejar elemento de elementos"> {{ item }} </li>
</ul>
La directiva *ngFor está vinculada a la propiedad items del componente. La directiva ngFor crea una plantilla para cada elemento de la matriz y vincula el elemento a la variable del elemento. Esto permite que el modelo muestre cada elemento de la lista de forma dinámica, eliminando así la necesidad de manipulación manual del DOM.
Directivas de enlace de datos y atributos
Las directivas de atributos modifican el comportamiento o la apariencia de un elemento DOM. Utiliza enlace de datos para actualizar dinámicamente los atributos de un elemento en función de los cambios en los datos del componente.
Veamos la directiva ngClass, que se utiliza para agregar o eliminar dinámicamente una clase de un elemento según la propiedad de un componente, lo que facilita la modificación de la apariencia del elemento.
Aquí hay un ejemplo de cómo usar ngClass.
// código de componente
@Componente({
selector: 'aplicación-mi-componente',
URL de plantilla: './mi-componente.componente.html',
URL de estilo: ('./mi-componente.componente.css')
})
exportar clase MiComponenteComponente {
isRed: booleano = verdadero;
}
<!-- Código de plantilla -->
<div (ngClass)="{'red': isRed, 'blue': !isRed}">Este texto será rojo o azul dependiendo del valor de isRed</div>
La directiva ngClass está vinculada a un objeto con dos propiedades: rojo y azul. El valor de cada propiedad está determinado por el valor booleano de la propiedad isRed del componente. Si isRed es verdadero, la clase roja se aplica al elemento. De lo contrario, se aplicará la clase azul.
De manera similar, la directiva ngStyle se puede utilizar para establecer dinámicamente el estilo de un elemento en función de los datos del componente. Aquí hay un ejemplo:
// código de componente
@Componente({
selector: 'aplicación-mi-componente',
URL de plantilla: './mi-componente.componente.html',
URL de estilo: ('./mi-componente.componente.css')
})
exportar clase MiComponenteComponente {
color de fondo: cadena = 'rojo';
}
<!-- Código de plantilla -->
<div (ngStyle)="{'background-color': backgroundColor}">Este div tendrá un color de fondo rojo</div>
Creación de políticas personalizadas con enlace de datos
Las directivas angulares son una herramienta poderosa que permite a los desarrolladores crear componentes reutilizables para modificar la funcionalidad según el caso de uso. Podría ser cómo validar la entrada del usuario, mostrar datos complejos o activar animaciones.
Ahora creemos una directiva personalizada.
Crear la política
Utilice el decorador @Directive para crear una nueva directiva. Esta directiva también especifica cualquier entrada o salida.
importar {Directiva, Entrada} desde '@angular/core';
@Directiva({
selector: '(miDirectivaPersonalizada)'
})
clase de exportación MyCustomDirective {
@Input myCustomInput: cadena;
constructor {}
}
Implementar la Directiva
Ahora se debe definir un comportamiento para la directiva antes de que se pueda implementar la directiva. El siguiente código utiliza los servicios ElementRef y Renderer2 para cambiar el color de fondo de un elemento cuando cambia la entrada personalizada.
importar {Directiva, Entrada, ElementRef, Renderer2} desde '@angular/core';
@Directiva({
selector: '(miDirectivaPersonalizada)'
})
clase de exportación MyCustomDirective {
@Input myCustomInput: cadena;
constructor (el privado: ElementRef, renderizador privado: Renderer2) { }
ngOnChanges(cambios: CambiosSimples) {
si (cambios.myCustomInput) {
const nuevoColor = cambios.myCustomInput.currentValue;
this.renderer.setStyle(this.el.nativeElement, 'color de fondo', newColor);
}
}
}
El método de ciclo de vida ngOnChanges se llama cada vez que cambia la entrada personalizada.
Agregar la directiva a un componente
Finalmente, agregue la directiva personalizada a la plantilla de un componente usando el selector especificado en el decorador @Directive.
<div myCustomDirective (myCustomInput)="fondoColor"></div>
Mejores prácticas y consejos para la vinculación de datos
Estas son algunas de las mejores prácticas más útiles.
- Evite expresiones complejas en las plantillas : utilice métodos de componentes para implementar la lógica necesaria para que su plantilla esté limpia, lo que hace que el código sea más fácil de entender y depurar.
- Utilice tuberías : utilice las integradas o personalizadas para la transformación según las necesidades de su aplicación, de modo que el modelo sea más fácil de mantener y leer.
- Concéntrese en una sola tarea : evite agregar lógica innecesaria para los datos a los componentes manteniéndolos simples.
Para mejorar el rendimiento de la aplicación:
- Utilice la estrategia de detección de cambios OnPush: esto mejora el rendimiento al activar la detección de cambios cuando cambian las propiedades de entrada o los eventos.
- Utilice trackBy en ngFor: esto permite a Angular identificar qué elementos han cambiado en lugar de volver a representar la lista completa.
- Utilice carga diferida : cargue solo los componentes necesarios. Esto reduce el tiempo de carga inicial y mejora la velocidad general de carga de la aplicación.
- Escribir pruebas unitarias : esto mejora la calidad del código y reduce los errores en la aplicación.
Si te gustó este artículo, mira:
- Dominar el enrutamiento angular: una guía completa
- Estructura de proyecto angular: mejores prácticas para archivos y carpetas
- Inyección de dependencia en Angular: una guía completa
- Principales bibliotecas y marcos de componentes de Angular UI
- ¿Qué es Angular y por qué su empresa debería considerarlo para su desarrollo?
- Los mejores frameworks Javascript de la actualidad
- ¿Cuál es el mejor framework para el desarrollo web?
Conclusión
La experiencia en enlace de datos en Angular es crucial para desarrollar aplicaciones Angular sólidas y eficientes. Los desarrolladores pueden mejorar la capacidad de respuesta de las aplicaciones implementando mejores prácticas de optimización del rendimiento y utilizando eficazmente el enlace de datos unidireccional y bidireccional. La vinculación adecuada de datos con componentes personalizados es crucial para evitar errores comunes al modelar datos.
Fuente: BairesDev
