dherges
commented
5 years ago Touch Events and NgZone
Herleitung: property binding, event binding, banana-in-the-box-syntax als Reminder
Refresher/Reminder: event bubbling from children to parent -> triggers change detection
Mit zone.js und NgZone: jedes DOM event fragt eine Change Detection an
Spezialfall Touch Gesten: eine Geste besteht aus mehreren Events, eine Geste sollte eine Change Detection anfragen. Jedoch nicht jedes Event.
Fallstricke:
@Output() fooChange = new EventEmitter();
/** WATCH OUT: this method is not running in NgZone! */
onTouchMove() {
this.fooChange.next(); // <-- target of event binding would also run outside NgZone
}===>
/** WATCH OUT: this method is not running in NgZone! */
onTouchMove() {
this.ngZone.run(() => {
this.fooChange.next(); // <-- target of event binding will execute in NgZone (as expected)
});
} ngOnDestroy() {
this.removeListener();
} constructor(
private _cdr: ChangeDetectorRef,
public _sliderRef: ElementRef,
private ngZone: NgZone,
private renderer: Renderer2
) {
const nativeElement = this._sliderRef.nativeElement;
this.ngZone.runOutsideAngular(() => {
this.hammerSliderEl = new Hammer(nativeElement);
this.hammerSliderEl.on('panmove', guardOutsideAngular(event => this.onPanMove(event)));
});
}
ngOnDestroy() {
if (this.hammerSliderEl) {
// Gracefully clean up DOM Event listeners that were registed by hammer.js
this.hammerSliderEl.off('panmove');
this.hammerSliderEl.stop(true);
this.hammerSliderEl.destroy();
}
}
onPanMove($event) {
if (/* … magic expression … */) {
/* … only internal changes, no rendering needed … */)
} else {
this._cdr.detectChanges();
}
} // Run in ngZone because it should update slider values outside component
this.unregisterListeners = [
this.renderer.listen(nativeElement, 'touchstart', event => this._onTouchStart(event)),
this.renderer.listen(nativeElement, 'mousedown', event => this._onClick(event))
];
if (this.unregisterListeners) {
this.unregisterListeners.forEach(fn => fn());
}
Living collection in comments below