0

Estoy iniciando en esto de Angular y tengo dudas respecto a la manipulación de variables entre componentes:

Tengo este ejemplo funcional, todo funciona bien, pero quisiera ver alternativas más eficientes a esta ya que manipulo los parámetros de los componentes por referencia, ya que realmente las variables a las que les seteo los datos es a la de los services.(en este caso todos los componentes ya fueron cargados y ya se ven en pantalla, sin valores pero ya están ahí)

así como esta imagen: introducir la descripción de la imagen aquí

y al dar clic al botón cargar estados haga esto: introducir la descripción de la imagen aquí

Les dejo los ejemplos de cómo está funcionando actualmente.

El primer componente tiene un bottón, que al darle clic debe ir por los estados y meterlos al select del segundo componente

primer-componente.ts

/*Imports @componente etc...*/
export class PrimerComponent{

  constructor( private segundoService : SegundoService ){ }

  eventoClic(){
    this.segundoService.getEstados();
  }
}

El select a llenar

segundo-componente.html

<select <!--class etc..--> formControlName="selectEstados">
   <option *ngFor="let estado of estados" [value]="estado.id">
     {{estado.desc}}
   </option>
</select>

el segundo componente tiene la referencia de la variable estados que se encuentra en segundo-service.ts

segundo-componente.ts

/*Imports @componente etc...*/
export class SegundoComponent {

  estados : any[];

  constructor( private segundoService : SegundoService, private tercerService : TercerService ){
    this.estados = this.segundoService.estados;
  }

  ngOnInit(): void {
    this.tercerService.informacion.nombre = 'Nombre 1'
    this.tercerService.informacion.edad = 20
  }
}

segundo-service va por la información y la mete a la variable estados de este service

segundo-service.ts

/*Imports @Injectable etc...*/
export class SegundoService {
  estados : any[] = [];

  getEstados() : any[]{
    //Se va por la información y la mete al array
    this.estados.push(.....
  }
}

al llenar esa variable, llena también la de segundo-componente ya que es una referencia de esta y el combo se llena sin problemas, estoy haciendo esto por medio de un service como pueden ver también se ejecuta el mismo proceso con el tercer-componente.

Y a su vez hay un tercer componente que también ya se ve en pantalla con los inputs vacíos

tercer-componente-html

<label>Nombre</label>
<input formControlname="informacion.nombre">
<label>Edad</label/>
<input formControlname="informacion.edad">

Se pasa la misma referencia como en el segundo-componente

tercer-componente-ts

 /*Imports @componente etc...*/
export class TercerComponent {

  informacion : any[];

  constructor( private tercerService : TercerService ){
    this.informacion = this.tercerService.informacion;
  }
}

De igual manera se llenan los datos del service, desde el segundo-componente en el evento ngOnInit y de igual manera, funciona conrrectamente y llena los inputs

tercer-service.ts

/*Imports @Injectable etc...*/
export class TercerService {
  informacion : any[
    nombre:'',
    edad:'';
  ];
}

Quisiera saber de qué otras maneras más eficientes puedo hacer la manipulación de las variables de otros componentes, ya que siento que no es la mejor manera de manipular las variables de otros componentes, aclaro que todos estos componentes ya están cargados y se ven en pantalla, están vacíos y hay que irlos llenando y que los cambios se reflejen instantaneamente.

Una disculpa por escribir mucho pero solo quería ser lo más claro posible.

1 respuesta 1

1

Hay varias maneras de hacerlo la primera es usuando @Input y @Output que basicamente es enviar propiedades u objetos por medio del template

<componente-hijo  [valorenviado]="objetoEnviadoDesdeElPadre"></componente-hijo>

https://victorroblesweb.es/2016/11/07/input-output-angular-2/

Y la otra manera es utilizando rxjs donde podrias tener un servicio donde guardas un BehaviorSubject y a este se subscriben muchos componentes, entonses cuando el estado del behavior cambie notificara a todos los componentes.

http://blog.enriqueoriol.com/2017/05/comunicacion-servicio-componente-en-angular.html

2
  • Gracias amigo, pero con el rxjs y subject me funcionó perfecto para lo que necesitaba, muchas gracias por la información. Commented el 7 may. 2020 a las 0:51
  • Perfecto! me alegro Commented el 7 may. 2020 a las 15:33

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.