En nuestro proyecto, cuando mostramos el detalle del registro de una película, cargamos un componente hijo que muestra los respectivos comentarios. Para ello, necesitaremos pasar un parámetro (en nuestro caso el id de la película en cuestión) para que muestre sólo los comentarios asociados a la misma.
Para el caso de paso de parámetros del componente padre al hijo, procederemos de la siguiente forma:
- En el componente hijo importamos «Input» e indicamos a la variable correspondiente que procederá de su componente padre:
- import { Component,OnInit,Input } from ‘@angular/core’;
- y dentro de la clase: @Input() id_pelicula :number = 0;
- El componente padre, al insertar el componente hijo, indicará dicho paso de parámetros:
- <app-comentarios [id_pelicula] = «id_pelicula»></app-comentarios>
- donde el primer id_pelicula hace referencia al nombre de la variable en el componente hijo; el segundo, al nombre de la variable en el componente padre. En nuestro caso, coinciden.
Para el caso de paso de parámetros del componente hijo al padre, procederemos como sigue:
- En el hijo declaramos un evento de tipo EventEmitter y, para pasar el parámetro, ejecutamos un método (envioMensaje) que lanza el evento al padre.
- import { Component, Output, EventEmitter } from «@angular/core»;
- y dentro de la clase: @Output() mensajeEvento = new EventEmitter<string>();
- y creamos una función, pasando el parámetro que queremos:
- envioMensaje() {
- this.mensajeEvento.emit(this.pelicula_id);
- }
- Desde el padre creamos una función para recibir el mensaje desde el evento:
- reciboMensaje($event) {
- this.pelicula_id = $event;
- }
- y al incluir el componente hijo lo haremos de esta forma:
- <app-comentarios (mensajeEvento)=»reciboMensaje($event)»></app-comentarios>