Tengo un evento de desplazamiento y siempre que me desplazo, la detección de cambios se ejecuta en segundo plano.

Entonces, debido a eso, traté de optimizar mi desplazamiento con antirrebote.

La idea es: mientras me desplazo inicialmente, pongo mi código en runOutsideAngular , lo que no activará la detección modificada, PERO después de que pase ese intervalo en la eliminación de rebotes, quiero ejecutar en la zona angular, pero no está sucediendo, mi número no se actualiza en la interfaz de usuario

HTML

 <h1>{{ number }}</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1> <h1>sdsdsd</h1>

COMPONENTE DE LA APLICACIÓN TS

 constructor(public ngZone: NgZone) {}; codeToExecute() { this.ngZone.run(() => { this.changeSomethingToUI(); }) } ngOnInit() { const processChange = this.debounce(this.codeToExecute.bind(this), 1000); this.ngZone.runOutsideAngular(() => { window.addEventListener('scroll', processChange) }) } debounce(fn, delay = 300){ let timer; const that = this; return function() { clearTimeout(timer); timer = setTimeout(() => { fn(); }, delay) } } number = 5; changeSomethingToUI() { this.number = 15; } ngAfterViewChecked() { console.log('Change detection triggered!'); }

¿Por qué después de dejar de desplazarme en 1000 ms no obtengo mi número actualizado a 15 ?