En Angular, podemos transmitir los datos en ambas direcciones, es decir, adentro: al componente secundario y afuera: al componente principal. Para enviar datos al componente secundario, usamos el enlace de propiedad y para este último usamos EventEmitter.
En este artículo, hablaremos sobre la directiva EventEmitter y cómo podemos pasarle 2 parámetros.
Echemos un vistazo al código fuente de EventEmitter:
export declare class EventEmitter<T>
extends Subject<T> {
__isAsync: boolean;
constructor(isAsync?: boolean);
emit(value?: T): void;
subscribe(
generatorOrNext?: any, error?:
any, complete?: any): any;
}
Es claramente visible que en el método de emisión solo se puede pasar un parámetro de tipo T, por lo que no podemos pasarle dos parámetros directamente. En su lugar, podemos crear un objeto que contenga todos los parámetros y pasar el objeto como una sola entidad.
Acercarse:
- EventEmitter nos permite emitir cualquier tipo de objeto, por lo que le sacaremos partido.
- Para pasar los parámetros, envolveremos todos los parámetros dentro de las llaves (esto los combinará como un solo objeto) y lo pasaremos al método de emisión.
- Para recibir los parámetros en el componente principal, crearemos un tipo de objeto similar y actualizaremos su valor con el del objeto recibido.
Sintaxis:
@Output() sendobject = new EventEmitter<any>();
this.sendobject.emit({stringval, numval, ...});
Ejemplo: Crearemos dos propiedades en el componente secundario y las recibiremos en el componente principal mediante EventEmitter.
Código para el componente secundario:
import {
Component, OnInit, EventEmitter, Input, Output
} from '@angular/core';
@Component({
selector: 'app-test',
template: `
<h2>child component<h2>
<h4>{{name}}</h4>
<h4>{{age}}</h4>
<button (click) = "send_name_age()">send data</button>
`,
styles: []
})
export class TestComponent {
constructor() { }
public name = "geek2";
public age = 22;
/* we will define the type of the
an object that will be emitted.*/
@Output() public data =
new EventEmitter<{name:string, age:number}>();
send_name_age()
{
/* we will wrap the parameters
to be sent inside the curly brackets.*/
this.data.emit({name:this.name, age:this.age});
}
ngOnInit(): void {
}
}
Código para el componente padre:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div style="text-align: center;" >
<h1>parent component</h1>
<h2>{{model.name}}</h2>
<h2>{{model.age}}</h2>
</div>
/* The data that is sent by the
child component will be
received in the */
/* Parent component as a parameter
for change_name_age method. */
<app-test (data) = "change_name_age($event)" >
</app-test>
`,
styleUrls: []
})
export class AppComponent {
/* Create a model of the type that is
emitted by the child component to
receive it.*/
public model = { name: "geek1", age: 24 }
change_name_age(data) {
/* Update the current model with
the value sent by the child
component. */
this.model = data;
}
}
Producción:
Recibió correctamente la edad y el nombre del componente secundario en el componente principal.
- Antes de recibir nombre y edad:
- El nombre y la edad en el componente principal se actualizan después de recibirlo del componente secundario.
Publicación traducida automáticamente
Artículo escrito por vaibhav19verma y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA