2

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?

1 respuesta 1

1

te recomiendo usar una variable reactiva (RxJs) para tu caso puedes usar subject, en tu servico declara la variable asi:

productos = new Subject<Productos[]>();

Esta variable devuelve un observable entonces nos podemos subscribir a el desde el componente A

this.servicio.productos.subscribe((productos: Producto[]) => {
     // tu logica
});

supongamos que desde otro componente B actualizamos los datos, por tanto queremos que el componente A reaccione a esos datos para ello llamamos el metodo next y pasamos los nuevos datos, por tanto el componente A reaccionara

this.servicio.listar().subscribe(productos=> {
           this.servicio.productos.next(productos);
});

si tu aplicacion se vuelve muy grande entonces te recomiendo usar el patron Redux con NgRx

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.