Mi plantilla angular debe mostrar un valor que cambia rápidamente, impulsado por eventos de movimiento del mouse, que estoy recuperando de mi tienda NgRx. La tienda parece mantenerse al día con los cambios de datos, pero el valor resultante que se muestra en la plantilla se retrasa y parece actualizarse solo cuando el mouse deja de moverse.

Un componente con aproximadamente 300 elementos DOM detecta eventos mousemove y los maneja fuera de ngZone de la siguiente manera:

 ngAfterViewInit() { const eventElement = this.eventDiv.nativeElement; this.move$ = fromEvent(eventElement, 'mousemove'); this.leave$ = fromEvent(eventElement, 'mouseleave'); /* * We are going to detect mouse move events outside of * Angular's Zone to prevent Change Detection every time * a mouse move event is fired. */ this.ngZone.runOutsideAngular(() => { // Check we have a move$ and leave$ objects. if (this.move$ && this.leave$) { // Configure moveSubscription. this.moveSubscription = this.move$.pipe( takeUntil(this.leave$), repeat()).subscribe((e: MouseEvent) => { e.stopPropagation(); this.mouseMove.emit(e); }); }; });

Un componente principal maneja el evento mouseMove resultante y aún fuera de ngZone realiza algunos cálculos para determinar sobre qué elemento está el mouse. Una vez que se ha calculado el resultado, se llama a una función, pasando el resultado calculado, y dentro de esta función envío una acción NgRx dentro de ngZone usando this.ngZone.run(() => { dispatch Action here } .

Puedo ver que la Tienda reacciona rápidamente a los datos cambiantes. Luego tengo un componente separado responsable de mostrar el resultado. Un Observable escucha los valores cambiantes del Selector y muestra el resultado mediante interpolación.

Curiosamente, agregué un tap RxJs en la declaración Observable de la siguiente manera:

 public mouseoverLocationName$: Observable<string | null>; constructor( public store: Store<fromPilecapReducers.PilecapState> ) { this.mouseoverLocationName$ = this.store.pipe( select(fromPilecapSelectors.PilecapMapSelectors.selectMouseoverLocationName), tap(locationName => { console.log(`mouseoverLocation$: ${locationName}`); }) ); }

La consola cierra la sesión del valor de locationName agradable y rápidamente. Sin embargo, el elemento html que muestra la cadena es muy lento y, como dije antes, solo parece actualizarse cuando el mouse deja de moverse. El código de la plantilla es el siguiente:

 <h2>{{mouseoverLocationName$ | async}}</h2>

¡He llegado al punto en que no puedo ver el bosque por los árboles! cualquier sugerencia u orientación muy bienvenida.