Hola Habr! Les presento la traducción del artículo
"Entendiendo @Input, @Output y EventEmitter en Angular" por foolishneo.
Doy la bienvenida a todos a acumular información sobre las complejidades del marco angular.
Hoy pensé que era necesario estudiar mejor la información sobre la organización de la interacción entre los componentes angulares y comenzar a practicar la traducción de artículos que me interesan del inglés.
Espero que haya personas para quienes la traducción del artículo de
Medium sea útil.
Después de haber tenido el deseo de comenzar a traducir artículos útiles del inglés, decidí comenzar con un artículo simple, no muy voluminoso, pero que posiblemente complemente el conocimiento existente del artículo. A su atención, caballeros ...
Para aquellos nuevos en el aprendizaje de Angular, los decoradores de
entrada y
salida pueden ser vergonzosos, especialmente cuando intentas descubrir su propósito con ejemplos de código. En este artículo, intentaré explicarlos de la manera más simple posible.
Herramienta de intercambio de datos
En primer lugar, la tarea de los decoradores de
entrada y
salida es intercambiar datos entre los componentes. Son un mecanismo para recibir / enviar datos de un componente a otro.
La entrada se usa para recibir datos, mientras que la
salida se usa para enviarlos.
La salida envía datos al exponerlos como productores de eventos, generalmente como objetos de la clase
EventEmitter.Por lo tanto, cuando vea el código, a semejanza de esto:
@Component({ selector: 'todo-item', ... }) export class TodoItemComponent { @Input() item @Output() onChange = new EventEmitter() }
él quiere decir:
- Hola, espero que me envíen los datos. Los obtendré y los guardaré como el valor de la propiedad del artículo.
- Por cierto, seré la razón para enviar datos utilizando la propiedad onChange.
Digamos que tiene un componente
TodoList que contiene un componente
TodoItem .
En la plantilla del componente
TodoLis t, espera ver:
... <todo-item [item]="myTask" (onChange)="handleChange($event)" </todo-item> ...
que significa
- El componente TodoList coloca el valor de los datos en su propiedad myTask y lo pasa al componente TodoItem
- Los datos transferidos desde el componente TodoItem serán recibidos y procesados por la función handleChange () del componente TodoList
Teoría suficiente. Veamos un ejemplo.
@Input y Output en acción.
Presta atención a
un ejemplo.Aquí creé 2 componentes, el componente
hola , anidados en el componente de la
aplicación . El componente
hola tiene
entrada y
salida :
hello.component.ts @Component({ selector: 'hello', template: ` <h3 (click)="onClick.emit('Neo')"> ... </h3> ` }) export class HelloComponent { @Input() myFriend: string @Output() onClick = new EventEmitter() }
El componente
hello espera obtener un valor de cadena y ponerlo como el valor de la propiedad
myFriend .
@Input() myFriend: string
Cada vez que haga clic en él, la propiedad de envío de datos
onClick del decorador de
Salida transmitirá al "mundo exterior" una cadena con el contenido de "Neo".
<h3 (click)="onClick.emit('Neo')">
A continuación se muestra el código del componente de la
aplicación :
app.component.ts export class AppComponent { ng = 'Angular' myName = 'Neo' upCase(st:string): void { ... } } app.component.html <hello myFriend="{{ ng }}" (onClick)="upCase($event)"></hello> <h3>My name is {{ myName }}</h3>
Tenga en cuenta que el componente de la
aplicación utiliza la etiqueta de componente
hello en su plantilla, que realiza 2 acciones:
- pasa el valor de la cadena 'Angular' al componente hello usando la propiedad ng
- y recibe el valor enviado desde el componente hello y procesa el valor recibido utilizando la función upCase ():
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">
Puedes ver la aplicación en acción
aquí.