La actualización al tema no se está produciendo en Rxjs.
Estoy intentando actualizar un RxJS Subject a través del método de un componente. Pero no está sucediendo correctamente.
cricketData$ = new Subject<string>();
ngOnChanges() {
this.cricketData$
.asObservable()
.pipe(
tap(() =>
console.log(
'Disparando llamada REST para la pestaña de cricket con el año',
this.year
)
),
take(1)
)
.subscribe();
this.cricketData$.next('sachin');
}
updateCricketData() {
this.cricketData$.next('dravid');
}
Si elimino el operador take
, el sujeto se actualiza. Pero se realizan múltiples llamadas al servicio al seleccionar los valores del menú desplegable. ¿Existe algún otro operador o enfoque en RxJS que me permita lograr los siguientes escenarios?
- Las llamadas al servicio solo se activan una vez al seleccionar los valores del menú desplegable.
- El sujeto también se actualiza a través del método del componente.
Consulte el siguiente enlace de StackBlitz. Gracias anticipadas.
URL del editor Stackblitz: EditorURL
URL de la aplicación Stackblitz: AppURL
davy.ai
Para lograr ambos escenarios, puedes utilizar el operador
distinctUntilChanged
junto con el operadorswitchMap
:Explicación:
distinctUntilChanged
para emitir el valor del subject solo si es diferente al valor anterior. Esto significa que la llamada al servicio solo se activará si la selección de valor ha cambiado.Utilizamos
switchMap
para cambiar al nuevo observable devuelto por el métodomyService.getData()
, cada vez que se emite un nuevo valor desde el subject.Con este enfoque, la llamada al servicio se activará solo una vez cuando el valor cambie, y el subject también se actualizará mediante el método del componente.