Me preguntaba cómo actualizar un observable dentro de una suscripción sin desencadenar muchos eventos.
En este ejemplo, me suscribo a area: Observable<Area> , si el área cambia, me gustaría actualizar el theme: Observable<Theme> . distinctUntilChanged() debería hacer que la suscripción solo se active si el valor ha cambiado, pero cada vez que se actualiza el area , la cantidad de actualizaciones de theme aumenta en uno.
observeArea(): void { this.area .pipe(distinctUntilChanged()) .subscribe(area => { this.themeService.updateTheme({primaryColor: area.color}); // should happen only once per area change }) }¿Hay alguna forma "correcta" de hacer esto, sin desencadenar interminables actualizaciones de temas?
Creo que el problema podría estar en la forma en que está actualizando el tema.
Si está intentando actualizar el tema llamando al método observeArea() .
Cada vez que llame al método, se creará una nueva suscripción. El evento se pasará a cada suscripción. Entonces, cada vez que llame al método, una suscripción aumentará.
Solución
async area$!: Observable<any>; observeArea(): void { this.area$ = this.area .pipe( distinctUntilChanged(), tap(area => this.themeService.updateTheme({primaryColor: area.color});) ) } y en el area$ | async para suscribirse. ejemplo:
<ng-container *ngIf="area$ | async">...</ng-container> observeArea(): void { const sub = this.area .pipe(distinctUntilChanged()) .subscribe(area => { this.themeService.updateTheme({primaryColor: area.color}); sub.unsubscribe(); }) } Es mejor usar tubería async .
Creo que esto resuelve tu problema.