Tengo un proyecto de Angular2+ donde tengo un servicio con un Observable, el cual se actualiza su valor al ejecutarse una petición HTTP.
resultados$: Observable<any>;
buscar( termino: string ) {
this.resultados$ = this.http.get(`${environment.urlAPI}/products?&name=${termino}`).pipe(
map( (data : any) => {
return data.products;
})
);
}
El método buscar()
lo ejecuto desde un componente (buscardorComponent) al hacer click()
en un elemento.
buscar() {
this.busquedaService.buscar(this.busqueda);
}
Esto actualiza la variable resultados$
del servicio correctamente.
En otro componente necesito leer los cambios de resultados$
del servicio para poder mostrar la data.
export class BusquedaComponent implements OnInit {
resultados$: Observable<any>;
constructor(private busquedaService: BusquedaService) { }
ngOnInit() {
this.resultados$ = this.busquedaService.resultados$;
}
}
Dentro del HTML de BusquedaComponent voy a utilizar el pipe async
para poder subscribirme y desubscribirme del observable. Además de utilizar un ngFor
para mostrar la data.
El problema es que al hacerlo en el ngOnInit()
en ese momento el observable del servicio aún se encuentra vacío. ¿Cómo puedo sincronizar ambos observables para que cuando cambie el observable del servicio cambie el observable del componente?