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í)
y al dar clic al botón cargar estados haga esto:
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.