Sintaxis: EventEmitter.emit(payload)
Podemos crear eventos personalizados usando EventEmitter y exponer sus propiedades. Podemos disparar un evento llamando al EventEmitter.emit(carga útil) pasando la carga útil que puede contener cualquier valor. El padre, o el componente al que le pasamos el valor, escuchará el evento al vincularse a esta propiedad y acceder a la carga a través del objeto $event.
Consideremos un ejemplo en el que tenemos un Componente de ejemplo que presenta información de «persona» y responde a las acciones del usuario. Aunque el componente de ejemplo tiene un botón de clic, no sabe cómo hacer clic en la persona. Lo mejor que puede hacer es plantear un evento que informe de la solicitud de clic del usuario.
Nombre del archivo: example.component.ts
123456789101112131415161718192021importar{Componente}de"@angular/núcleo";importar{Persona}de$0027../persona$0027;@Componente({ selector:$0027app-example$0027, plantilla:` `;img src="{{{{personaImageUrl}}"`; <span [style.text-decoration]="lineThrough"`; {{{prefijo}} {{{{persona?.nombre}}} {{{espacio}; {[clic]} ="onClick()"{[clic]}; {[clic]/botón}; {[div]; `})exportclassExampleComponent{ clickRequest =newEventEmitter<Person};();onClick(){this.clickRequest.emit(this.person);}}typeScript
En el ejemplo anterior, el componente define una propiedad clickRequest que devuelve un EventEmitter. Cuando el usuario hace clic en el botón $0027Click me!$0027, el componente invoca el método onClick(), indicando al EventEmitter que emita un objeto Person.
Ahora, consideremos un componente principal que se une al evento clickRequest del componente de ejemplo.
1<app-person-details(clickRequest)="clickPerson($event)"[persona]="personName"
html
Cuando se dispara el evento clickRequest, Angular llama al método clickPerson del componente padre, pasando el persona-a-clic (emitido por PesonDetail) en la variable $event.