La vinculación de eventos le permite escuchar y responder a las acciones del usuario, como pulsaciones de teclas, movimientos del mouse, clics y toques.

Vea el ejemplo en vivo para ver un ejemplo funcional que contiene los fragmentos de código en esta guía.

Vinculante a eventos

Para enlazar a un evento, usa la sintaxis de enlace de eventos Angular. Esta sintaxis consta de un nombre de evento de destino entre paréntesis a la izquierda de un signo igual y una declaración de plantilla entre comillas a la derecha. En el siguiente ejemplo, el nombre del evento de destino es click y la declaración de la plantilla es onSave().

El enlace de eventos escucha los eventos de clic del botón y llama al componente onSave() método cada vez que se produce un clic.

Diagrama de sintaxis

Eventos personalizados con EventEmitter

Las directivas suelen generar eventos personalizados con un Angular EventEmitter de la siguiente manera.

  1. La directiva crea una EventEmitter y lo expone como una propiedad.
  2. La directiva luego llama EventEmitter.emit(data) para emitir un evento, pasando datos del mensaje, que puede ser cualquier cosa.
  3. Las directivas principales escuchan el evento enlazándose a esta propiedad y accediendo a los datos a través del $event objeto.

Considere una ItemDetailComponent que presenta información sobre el artículo y responde a las acciones del usuario. Aunque el ItemDetailComponent tiene un botón de borrar, no contiene la funcionalidad para borrar al héroe. Solo puede generar un evento que informe la solicitud de eliminación del usuario.


 item.name

El componente define un deleteRequest propiedad que devuelve un EventEmitter. Cuando el usuario hace clic Borrar, el componente invoca el delete() método, diciendo el EventEmitter para emitir un Item objeto.

// This component makes a request but it can't actually delete a hero.
@Output() deleteRequest = new EventEmitter();

delete() 
  this.deleteRequest.emit(this.item);
  this.displayNone = this.displayNone ? '' : 'none';
  this.lineThrough = this.lineThrough ? '' : 'line-through';

El componente principal de alojamiento se une al deleteRequest evento del ItemDetailComponent como sigue.

Cuando el deleteRequest eventos, Angular llama al componente principal deleteItem() método con el artículo.

Determinar un objetivo de evento

Para determinar un objetivo de evento, Angular comprueba si el nombre del evento de destino coincide con una propiedad de evento de una directiva conocida. En el siguiente ejemplo, Angular comprueba si myClick es un evento en la costumbre ClickDirective.

myClick is an event on the custom ClickDirective:


clickMessage

Si el nombre del evento de destino, myClick no coincide con un evento de elemento o una propiedad de salida de ClickDirective, Angular informa de un error de “directiva desconocida”.

Que sigue

Para obtener más información sobre cómo funciona el enlace de eventos, consulte Cómo funciona el enlace de eventos.