2

Tengo 3 componentes,1 padre y 2 hijos.

Componente padre:

<p-tabView [(activeIndex)]="index">
  <p-tabPanel header="Child1">
    <app-child1 [person]="person.data1"></app-child1>
  </p-tabPanel>
  <p-tabPanel header="Child2">
    <app-child2 [person]="person.data2"></app-child2>
  </p-tabPanel>


person: any = {};
ngOnInit(): void {
  this.personService.getPerson(this.id).then(obj => this.person= obj);
}

Componente Child1:

@Input()
person: any;

ngOnInit(): void {
  this.person= {age: 0};
}

<p-inputNumber [(ngModel)]="person.age" ></p-inputNumber>

Componente Child2:

@Input()
person: any;

ngOnInit(): void {
  this.person= {adress: [{number:0}, {number:0}]};
}

<p-inputNumber disabled [(ngModel)]="person.age" ></p-inputNumber>
<p-inputNumber (ngModel)]="person.adress[0].number" ></p-inputNumber>
<p-inputNumber (ngModel)]="person.adress[1].number" ></p-inputNumber>

Me gustaría que si el valor de age en Child1 cambia, automáticamente se refleje el cambio en Child2.

2
  • Debes apoyarte en EventEmitter para lo que deseas hacer. Si compartes el código de los componentes padre e hijo podría ayudarte a adaptar el código. el 13 oct. 2022 a las 15:28
  • acabo de añadir el código de los componentes
    – sirdaiz
    el 13 oct. 2022 a las 15:48

1 respuesta 1

1

Revisando el código que has compartido parece que resolver tu problema es mucho más sencillo de lo que imaginaba.

Puedes hacerlo transfiriendo los datos originales a los hijos y no realizar ni copias ni modificaciones de dichos datos en ellos.

El principal problema que sufres es que desde el hijo 2 no puedes acceder a la propiedad real del padre llamada person.age, ya que has sobreescrito el valor de person dentro del componente por el contenido de person.data2 del padre.

Para solucionarlo tendrías dos opciones:

  • Enviar el contenido completo de person a cada hijo y acceder a los datos de data1 o data2 según se necesite dentro de ellos.
  • Usar { address: person.data2.address, age: person.data1.age } en [person] del hijo 2.

Esa última solución es la adoptada en el código que te muestro. Ejemplo:

<app-child2
  [person]="{
    address: person.data2.address,
    age: person.data1.age
  }"
></app-child2>

Además, fíjate que en el código que te muestro a continuación que he eliminado todas las asignaciones que hacías en los hijos.

Componente Child 1

He eliminado el método ngOnInit() en el que sobre escribías el valor de person.

export class Child1Component {
  constructor() { }

  @Input()
  person: any;
}

<p-inputNumber [(ngModel)]="person.age" ></p-inputNumber>

Componente Child 2

He eliminado el método ngOnInit() en el que sobre escribías el valor de person.

export class Child2Component {
  constructor() { }

  @Input()
  person: any;
}

<p-inputNumber disabled [(ngModel)]="person.age" ></p-inputNumber>
<p-inputNumber (ngModel)]="person.address[0].number" ></p-inputNumber>
<p-inputNumber (ngModel)]="person.address[1].number" ></p-inputNumber>

Componente padre

En este componente he cambiado la manera en la que envío los datos al componente Child 2 para que tenga acceso a la edad y a la dirección sin tener que hacer grandes cambios en el propio componente hijo:

export class AppComponent {
    person = {
        data1: { age: 40 },
        data2: { address: [ { number: 0 }, { number: 0 } ], }
    };
}

<p-tabView [(activeIndex)]="index">
  <p-tabPanel header="Child1">
    <app-child1 [person]="person.data1"></app-child1>
  </p-tabPanel>
  <p-tabPanel header="Child2">
    <app-child2
      [person]="{
        address: person.data2.address,
        age: person.data1.age
      }"
    ></app-child2>
  </p-tabPanel>
</p-tabView>

Puedes ver una versión en línea del código en la siguiente URL:


PD: Tal y como has desarrollado tu código, desde el punto de vista de los hijos el contenido de person será el que pases a través del atributo del componente con el mismo nombre, por lo que para el componente hijo 1 será person.data1 y para el 2 será person.data2.

Creo que lo más coherente hubiera sido pasar el contenido de person completo o bien haber llamado de manera diferente al atributo.

Edición:

Para generar un campo de formulario por cada elemento de address de manera dinámica recomiendo hacer uso de un bucle NgFor usando uno de estos dos métodos:

Repetir un componente y su contenido:

<p-inputNumber
  *ngFor="let address of person.address"
  [(ngModel)]="address.number"
></p-inputNumber>

Repetir todo lo encapsulado:

<ng-template ngFor let-address [ngForOf]="person.address">
    <input [(ngModel)]="address.number" /><br />
</ng-template>
5
  • el problema lo tenia que estaba inicializandolo en cada hijo y me daba error de ctx. El caso es que en el padre inicializar pero en data2, en vez de tener dos "address" tengo N y esa depende del resultado q me devuelva el API, ¿alguna forma óptima que pueda hacerlo?
    – sirdaiz
    el 14 oct. 2022 a las 10:00
  • Claro, debes usar un bucle NgFor. Edito el ejemplo que te enlacé para hacerlo mediante bucles y no mediante HTML estático. el 14 oct. 2022 a las 10:03
  • Edición hecha, espero que te sea de ayuda :) el 14 oct. 2022 a las 10:12
  • gracias por tu respuesta, justo lo hice pero usando ngif y despues ngfor, no conocia la etiqueta ng-template, es posible que pueda modificar tu ejemplo ahi arriba y ver si se puede mejorar ?
    – sirdaiz
    el 14 oct. 2022 a las 10:33
  • Claro que sí. Puedes modificar el código para probar lo que necesites. Si inicias sesión puedes hacer una bifurcación (fork) y guardar tu propia versión del código. el 14 oct. 2022 a las 11:52

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.