0

estaba probando el tema de comunicaciones entre componentes dentro de angular, y me preguntaba si existe la comunicacione entre hermanos, es decir, si es entre padre-hijo o al reves se crea lo siguiente:

un emisor :

@Output()  emisor = new EventEmitter<string>();

pero si quiero comunicar dos componentes que estan al mismo nivel ?...

<comp-hijo-1></comp-hijo-1>
<comp-hijo-2></comp-hijo-2>

No hay manera de comunicarse ?

He visto que se puede usar servicios, pero no se cual es la mejor forma. A demas, entre hermanos, siempre tiene q pasar la info por el padre ????

3
  • Sí, siempre tendrá que pasar por el componente padre que los contenga a los dos. Ese componente es el único que conoce de la existencia (y la referencia) de ambos. El uso de un servicio también podría valer... La mejor forma de hacerlo dependerá del propósito de la comunicación entre esos dos componentes. Si llegaras a explicarla podríamos ayudarte mejor.
    – VRoxa
    el 13 feb. 2021 a las 21:36
  • @VRoxa he encontrado una forma. Voy a publicarlo y a ver si me puedes comentar que tal te parece, gracias
    – josanangel
    el 13 feb. 2021 a las 21:46
  • @VRoxa ya he puesto la respuesta, espero tu opinion, gracias
    – josanangel
    el 13 feb. 2021 a las 21:53

2 respuestas 2

2

Respondiendo a tu approach.
Usar el EventEmitter<> está genial. Es el standard para comunicar de un componente a su padre. Lo que no me parece una buena idea es mantener la comunicación padre-hijo directamente des del HTML llamando a un método de la instancia del componente.
Me explico, este tipo de lógica deberías agregarla an los .ts, por la mera razón de que es donde deben estar. Deben estar ahí para controlar las cosas bien.

Por ejemplo, poder debuggar en algún momento ese execution flow y poder ver el estado o valor de un atributo concreto en ese momento des del padre.
O, por ejemplo, resulta que a día de mañana debes hacer que un tercer componente escuche a ese evento, etc.
Hay varias razones y situaciones en las que necesitamos mantener la lógica de la aplicación en el sitio que le corresponde, no por capricho.


Mi propuesta de solución
Te propongo usar reactive extensions, en concreto, para este caso, un Subject<>. El Subject<>, el cual será propiedad del componente padre va a pasarse a ambos hijos. Uno de ellos emitirá valores mientras el otro escuchará a las emisiones.

Des del componente padre (*.ts) declaramos el Subject<string>.

@Component({ ... })
export class AppComponent {
  subject = new Subject<string>();
}

Y pasamos ese Subject<> a ambos hijos (componente padre, .html)

<text-input [subject]="subject"></text-input>
<info-stack [subject]="subject"></info-stack>

Ahora, el componente info-stack (o como quieras llamarlo), que va a listar todos esos text, se suscribirá a los eventos del Subject<>

@Component({ ... })
export class InfoStackComponent implements OnInit {
  @Input() subject: Subject<string>;
  infos: string[] = [];

  constructor() {}

  ngOnInit() {
    // Se suscribe a los valores que se emiten por el Subject<>
    this.subject.subscribe((text: string) => {
      this.infos = [...this.infos, text];
    });
  }
}

Y el componente text-input (o como quieras llamarlo), que también recibirá el Subject<>, va a usarlo para emitir valores.

@Component({ ... })
export class TextInputComponent {
  @Input() subject: Subject<string>;
  text: string;

  constructor() {}

  sendInfo = (): void => {
    // Emite un nuevo valor por el Subject<>
    this.subject.next(this.text);
    this.text = "";
  };
}

En el caso de text-input, sería totalmente válido un EventEmitter<string> y que el padre "rebotara" ese valor por el Subject<>.

@Component({
  selector: "my-app",
  template: `
    <text-input (onInfo)="handleInfo($event)"></text-input>
    <info-stack [subject]="subject"></info-stack> 
  `
})
export class AppComponent {
  subject = new Subject<string>();

  handleInfo = (info: string) => {
    this.subject.next(info);
  };
}

De este modo, siempre podemos añadir todos los suscriptores que queramos a ese Subject<> o hacer que otros componentes puedan emitir, también, eventos por éste. Todo centralizado y manejado por el componente padre.

Te dejo un Stackblitz para ver todo el código del ejemplo.

Espero que sirva.

2
  • Muchas gracias por tu respuesta, que diferencia hay entre next y emit para el eventemmiter ?
    – josanangel
    el 13 feb. 2021 a las 22:59
  • La verdad es que ninguna, buena observación. next está obsoleto y debería ser emit, efectivamente. Puse next por un mal copy/paste. Voy a actualizar el Stackblitz.
    – VRoxa
    el 13 feb. 2021 a las 23:19
0

He hecho la prueba de la siguiente manera:

Input component

Este componente es un input text con un boton.

.html

<div>
  <input type="text" [(ngModel)]="text" [placeholder]="placeholder">
  <button (click)="sendInfo()"> Enviar info</button>
</div>

.ts

import {Component, EventEmitter, OnInit, Output} from '@angular/core';

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css']
})
export class InputComponent implements OnInit {
  public  text:string;
  public  placeholder:string;

  @Output()
  emisor : EventEmitter<string> = new EventEmitter<string>();

  constructor() {
    this.placeholder = 'Escribe algo...';
    this.text = '';
  }

  ngOnInit(): void {
  }

  sendInfo(){
    console.log('sending info .. => '+this.text);
    this.emisor.emit(this.text);
    this.text = '';
  }

}

Input-result component (hijo 2)

Este estara pendiente de recibir un string para guardarlo en su lista.

.html

<div>
  <h2>Informacion recibida</h2>
  <ul>
    <li  *ngFor="let info of infos">{{info}}</li>
  </ul>
</div>

.ts

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';

@Component({
  selector: 'app-input-result',
  templateUrl: './input-result.component.html',
  styleUrls: ['./input-result.component.css']
})
export class InputResultComponent implements OnInit {

  public infos: string[];

  constructor() {
    this.infos = [];
  }

  ngOnInit(): void {
  }


  addText($event){
    this.infos.push($event);
    console.log('Hijo 2 = Info recibida => '+$event);

  }

}

app.component.ts (el padre de ambos hijos)

.html

' Aqui esta la clave, pongo un identificador al hijo que espera la respuesta y le digo al hijo 1 que directamente le pase el evento en una funcion que tiene el hijo 2 '

<div>
  <app-input (emisor)="input_result.addText($event)"></app-input>
  <app-input-result #input_result></app-input-result>
</div>

.ts (tiene mas cosas de lo que necesita pero es que estaba haciendo otras funciones)

import { Component } from '@angular/core';
import {configuracion} from './models/configuracion';
import {InputResultComponent} from './components/input-result/input-result.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers:[InputResultComponent]
})
export class AppComponent {
  title = 'recordando-angular-basico';
  public mostrarJuegos: boolean = true;
  public config;

  public  textInputHijo:string;

  constructor(private inputResult:InputResultComponent ){
    this.config = configuracion;

    this.title = this.config.titulo;
  }


}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.