Ahora nos sumergiremos en la sección de codificación de la guía para darles una mejor idea de cómo usar @Output().
Primero, haremos dos componentes. Enciende el cmd y ve a tu carpeta de proyectos y escribe los siguientes comandos:
12$ ng g c componentes/salida de los padres --skipTests=true$ ng g c componentes/salida de los hijos --skipTests=true
consola
Hemos creado con éxito los componentes; ahora es el momento de usar el decorador @Output().
app.component.html
1<app-parent-output, htmlEn app.component.html llamaremos al componente padre.
componente.de.producción.infantil
12345678910111213141516import{Componente,OnInit,Salida,Emisor de eventos}de"@angular/núcleo";@Componente({ selector: "app-child-output", templateUrl:"./child-output.component.html", styleUrls:["./child-output. component.scss"]})exportclassChildOutputComponentimentsOnInit{ @Output() demo =newEventEmitter<string>();constructor(){}ngOnInit(){this.demo.emit("Este es el componente hijo");}}ts
No se requiere ningún código en child-output.component.html. Sólo necesitamos enviar los datos del componente infantil, lo cual es posible usando la clase de decorador @Output() y EventEmitter; ambos están incluidos en el paquete @angular/core.
EventEmitter es una clase que se usa para emitir eventos personalizados y se usa sólo con el decorador @Output(). Amplía la clase Subject, que se utiliza para aplicar el tipo de comunicación proveedor-suscriptor. Subject es una parte de Observable, y puedes leer más sobre ella aquí.
En el fragmento anterior, hemos creado una variable de demostración encabezada por @Output() e instanciada por EventEmitter. EventEmitter acepta el tipo de datos que necesitamos pasar en par de llaves (<>). En nuestro caso, le damos una cadena al componente padre.
Nuestro componente infantil está listo para emitir el evento, así que llamamos al método de emisión, que es un método de la clase EventEmitter.
En el método ngOnInit() del componente hijo, llamaré al método emit. Los datos pasados del hijo necesitan ser accedidos en el componente padre, y para eso necesitamos el event binding.
parent-output.component.html
1<app-child-output(demo)="acceptData($event)"tipografía
En el componente padre, acabamos de llamar al componente hijo. Para acceder a los datos del componente hijo, tenemos que hacer un enlace de eventos. El nombre del evento debe ser el nombre de nuestra variable, y es instanciado por la clase EventEmitter. Para aceptar los datos que se pasan desde el componente hijo, tenemos que definir una función en el componente padre-salida.componente y llamarla en el selector app-child-output, como puedes ver en el recorte anterior. El uso de $event es obligatorio ya que obtiene los datos del hijo y los pasa a la función padre.
123456789101112131415161718import{Componente,OnInit}de"@angular/núcleo";@Componente({ selector: "app-parent-output", templateUrl:"./parent-output.component.html", styleUrls:["./parent-output. component.scss"]})exportclassParentOutputComponentimplementsOnInit{constructor(){}ngOnInit(){}acceptData(data){console.log("estos son los datos del hijo que se muestran en el componente padre: ", data );}}ts
En el código anterior, hemos creado una función que se llama en nuestro selector de componente infantil. data es el parámetro que almacena los datos procedentes del componente infantil.
Después de ejecutar este proyecto, podemos ver la siguiente salida en la consola:
Puede ver cómo se pasan los datos con éxito del componente padre al componente hijo, y mostramos la salida en la línea número 15 de parent-output.component.ts.
Ahora te has convertido en un maestro en el uso del decorador @Output().