Tengo una estructura como esta:

<parent-component>
   <child-component [input]="name"> </child-component>
   <child-component [input]="name> </child-component>
</parent-component>

Para escuchar el componente hijo, estoy usando @ViewChild. El problema es que solo escucha al primer hijo.

Hice un stackblitz para reproducir la situación:

StackBlitz

Allí puede ver que solo se muestra el primer "nuevoNombre" en la consola y no ambos. ¿Alguien podría decirme qué estoy haciendo mal?

0
HELPME 10 may. 2019 a las 09:50

4 respuestas

La mejor respuesta

Para escuchar a ambos, puede usar dos ViewChilds. Asigne referencias a ellos en el archivo .html y especifique qué oyente escucha en cuál.

En su app.component.html debería ser algo como:

Y luego puede configurar los oyentes en su app.component.ts así:

  @ViewChild('viewChild1') myFormValues;
  @ViewChild('viewChild2') anotherFormValues;
  informationInParentChild1;
  informationInParentChild2;

   constructor(private cdRef: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.informationInParentChild1 = this.myFormValues.myForm;
    this.informationInParentChild2 = this.anotherFormValues.myForm;
    this.cdRef.detectChanges();
  }

  submitForm() {
    console.log(this.informationInParentChild1.value);
    console.log(this.informationInParentChild2.value);
  }

Modifiqué su ejemplo de stackblitz, está funcionando allí.

Saludos.

1
Stöger 10 may. 2019 a las 07:02

En lugar de @ViewChild puede usar @ViewChildren para obtener los datos de los componentes aquí adjunto el registro de myFormValues aquí está el @ViewChildren enlace de documentación aquí puede ver el registro de la consola del objeto

3
Yash Rami 10 may. 2019 a las 07:31

Realmente, para la situación que se muestra en su StackBlitz, debe emitir un evento en el componente secundario, utilizando un @ Output y luego maneja ese evento en el componente padre.

El uso de este método crea un acoplamiento más flexible entre sus componentes que ViewChild / ViewChildren, ya que este último introduce la necesidad de que el padre sepa más sobre la implementación del niño.

Si tiene una situación que requiere que el componente primario llame a un método en el componente secundario, entonces usar @ViewChildren es la solución correcta, como se describe en la respuesta de Yash Rami.

0
Will Taylor 10 may. 2019 a las 07:58

Todavía no puedo comentar, pero estoy de acuerdo con Will Taylor. Eche un vistazo aquí para ver un ejemplo de enlace bidireccional con su ejemplo. No hay necesidad de depender de ChildComponent.

1
Christoph 10 may. 2019 a las 08:12