Los eventos de componentes con EventEmitter y @Output en Angular

Los componentes Angulares son los bloques de construcción fundamentales de la arquitectura. Una vez que haya comprendido la arquitectura de componentes, puede crear una imagen en su cabeza sobre cómo ensamblar su interfaz basada en la comunicación de datos.

En este post vamos a bucear en los componentes de Angular y cómo usar el EventEmitter y las Salidas, para que podamos transferir o notificar a cualquier componente padre que algo ha cambiado, o nos gustaría cambiarlo. Esto generalmente se hace a través de “eventos”, de ahí nuestro “EventEmitter” y está diseñado en torno a un sistema de flujo de datos unidireccional que adopta un enfoque mucho más razonable para el desarrollo de aplicaciones.

Finalicemos los conceptos básicos de la comunicación entre padres e hijos e hijos introduciendo EventEmitter y @Output.

Serie

1. Arranque su primera aplicación Angular
2. Creación de su primer componente Angular
3. Pasar datos a componentes Angulares con eventos de componentes @Input
4. con EventEmitter y @Output en Angular

Introducción

Este tutorial cubrirá eventos de componentes sin estado utilizando la API EventEmitter y el decorador @Output. Estos nos permiten emitir cambios o cualquier nombre de evento personalizado desde un componente personalizado en Angular.

Este post sigue del artículo anterior sobre el paso de datos en componentes Angulares con @Input, ¡así que asegúrese de leerlo primero!

Enlace de componentes con estado (padre)

Al igual que en el tutorial anterior, donde configuramos un decorador @Input para aceptar un enlace de entrada, podemos hacer lo mismo y escuchar en el padre cuando un valor cambia dentro de nuestro componente hijo.

Para hacer esto, regresaremos a nuestro componente principal que muestra nuestro recuento:

He hecho algunas adiciones aquí:

• Cambiado initialCount a myCount, ya no estamos configurando un “initialCount”, por lo tanto, el estado de conteo se administrará en el padre una vez que el componente hijo realice un cambio en él
• Creó una propiedad change personalizada en la plantilla <counter>, utilizando la sintaxis () de enlace de eventos, como aprendimos cuando creamos nuestro primer componente, esto significa algún tipo de evento (como click cuando se usa en un nodo de elemento nativo).
• Registró la propiedad myCount en el padre
• Agregó un método countChange() {} a la clase y lo pasó al receptor de eventos (change)

🎉 ¡Descárgalo gratis!

Vaya más allá del Array ForEach. Obtenga confianza con métodos más avanzados como Reducir, Buscar, Filtrar, Todos, Algunos y Mapear, y comprenda completamente cómo administrar Estructuras de datos JavaScript.

• Comprender completamente cómo administrar Estructuras de datos JavaScript con operaciones inmutables
• 31 páginas de sintaxis de inmersión profunda, ejemplos del mundo real, consejos y trucos
• Escribir más limpio y una lógica de programación mejor estructurada en 3 horas

✅ ¡Éxito! Revisa tu correo electrónico, disfruta.

Como un bono extra, también le enviaremos algunas golosinas adicionales a través de algunos correos electrónicos adicionales.

Esto configura nuestro flujo de datos unidireccional finalizado. Los datos fluyen hacia abajo desde la clase AppComponent, hacia`, el contador puede cambiar los valores, y una vez que el valor ha cambiado, esperamos que se llame a countChange(). Ahora tenemos que conectar esto.

@Decorador de salida

Al igual que con Input, podemos importar Output y decorar una nueva propiedad change dentro de nuestro CounterComponent:

Esto configurará los metadatos necesarios para indicar a Angular que esta propiedad se tratará como un enlace de salida. Sin embargo, necesita sentarse junto a algo llamado EventEmitter.

EventEmitter

Esta es la parte interesante. Para poder usar nuestro Output, necesitamos importar y enlazar una nueva instancia de EventEmitter a ella:

Usando TypeScript al máximo, haríamos algo como esto para indicar el tipo de valor de evento que estamos emitiendo, y nuestra salida change es de tipo EventEmitter. En nuestro caso estamos emitiendo un tipo number:

Invocando el EventEmitter

Entonces, ¿qué está pasando aquí? Hemos creado una propiedad change y enlazado una nueva instancia de EventEmitter a ella: ¿qué sigue?

Simplemente podemos llamar a nuestro método this.change; sin embargo, debido a que hace referencia a una instancia de EventEmitter, tenemos que llamar a .emit() para emitir un evento al padre:

Esto emitirá un cambio a nuestro oyente (change) que configuramos en el padre, al que se invocará nuestra devolución de llamada countChange($event), y los datos asociados con el evento se nos darán a través del $event propiedad.

Asignación de devolución de llamada con estado

Esto es lo que tendremos que hacer, reasignar this.myCount con el event que se devuelve. Explicaré por qué a continuación:

Esto crea un flujo de datos unidireccional puro. Los datos provienen de AppComponent, fluyen a nuestro contador, el contador realiza un cambio y emite ese cambio de vuelta al padre en nuestro comando, a través del EventEmitter que configuramos. Una vez que tenemos esos datos de copia de seguridad, fusionamos esos cambios de nuevo en nuestro componente padre (con estado).

La razón por la que hacemos esto es para demostrar que Parent: {{ myCount }} se actualiza al mismo tiempo que Output informa al padre.

Bonus: nombres de propiedades personalizados

Al igual que aprendimos con @Input() y creando nombres de propiedades personalizados, también podemos hacer lo mismo con @Output().

Supongamos que cambiamos el enlace (change) a (update):

Podemos conectar nuestro nombre de propiedad personalizado, mientras conservamos el nombre de propiedad interno @Output:

Esencialmente, solo le estamos diciendo a Angular que busque update como la propiedad a la que se debe enlazar, y podemos continuar usando this.change internamente.

Así que ahí lo tienes, la guía para usar salidas con EventEmitter en los componentes de Angular. Ahora entiendes el modelo, ¡feliz codificación!

Para aprender más técnicas, mejores prácticas y conocimientos de expertos del mundo real, recomiendo encarecidamente que consulte mis cursos de Angular, ¡lo guiarán a través de su viaje para dominar Angular al máximo!