I’m using a directive to allow swiping in all directions. Swiping fires procudures to update some data, then change the screen contents according to the data.
This works as expected on ionic serve, and android emulators, but on android devices (moto G and Samsung tablet behave the same), the vertical swipes always update the data, but the screen doesn’t change (sometimes it does on the second or third, but not to the current data). So the swipe is detected, but the message to update the screen is missing.
When I update the data with buttons, the app works as expected - both data and screen are updated correctly on the device.
I thought it might be something to do with change detection so I’ve got this.changeDetectorRef.detectChanges(); but it doesn’t make any difference if it’s on or off
Hammer.js says to test on device as you might need to configure things, the swipe is detected!
Any ideas? Thanks
Here is the directive
import {Directive, ElementRef, Output, OnInit, OnDestroy, EventEmitter} from '@angular/core';
import {Gesture} from 'ionic-angular/gestures/gesture';
declare var Hammer: any;
@Directive({
selector: '[swipe-vertical]' // Attribute selector
})
export class SwipeVertical implements OnInit, OnDestroy {
@Output() onSwipeUp = new EventEmitter();
@Output() onSwipeDown = new EventEmitter();
@Output() onSwipeLeft = new EventEmitter();
@Output() onSwipeRight = new EventEmitter();
private el: HTMLElement;
private swipeGesture: Gesture;
constructor(el: ElementRef) {
this.el = el.nativeElement;
}
ngOnInit() {
this.swipeGesture = new Gesture(this.el, {
recognizers: [
[Hammer.Swipe, {direction: Hammer.DIRECTION_ALL}]
]
});
this.swipeGesture.listen();
this.swipeGesture.on('swipeup', e => {
this.onSwipeUp.emit({ el: this.el });
console.log("Swipe Up");
});
this.swipeGesture.on('swipedown', e => {
this.onSwipeDown.emit({ el: this.el });
console.log("Swipe Down");
});
this.swipeGesture.on('swiperight', e => {
this.onSwipeRight.emit({ el: this.el });
console.log("Swipe Right");
});
this.swipeGesture.on('swipeleft', e => {
this.onSwipeLeft.emit({ el: this.el });
console.log (" Swipe Left");
});
}
ngOnDestroy() {
this.swipeGesture.destroy();
}
}
Here is some of home.html
<div swipe-vertical (onSwipeUp)="changeDescription(1)" (onSwipeDown)="changeDescription(-1)" (swipeleft)="changePicture(-1)"
(swiperight)="changePicture(1)" >
<table class = "mainStuff" >
<tr>
<td >
<img [src]="imgSource" alt="some_text" scroll="false">
</td>
<td >
Description Number {{descriptionNumber}} <br>
Picture Number {{pictureNumber}}
</td>
</tr>
</table>
</div>
and in home.ts - on of the procedures that updates the data
public changeDescription(descInc:number) : void {
//this.changeDetectorRef.detectChanges();
console.log("We have entered ChangeDescription with increment", descInc);
console.log("Entered changeDescription ", this.descriptionNumber);
//change the reader icon for the main page
switch (descInc)
{
case 1:{this.descriptionNumber=this.descriptionNumber +1 };
break;
case -1:{this.descriptionNumber=this.descriptionNumber -1};
break;
}
if (this.descriptionNumber==4) {this.descriptionNumber=0};
if (this.descriptionNumber==-1) {this.descriptionNumber=3};
console.log("Leaving changeDescription - should read ", this.descriptionNumber);
}
