我正在尝试为swipeUp对象创建一个新指令,所以 onSwipeUp="doThisFunction()"
这是一个其他人想要做同样事情的论坛: https://forum.ionicframework.com/t/unable-to-catch-vertical-swipe-drag-events/46380/4
这是我的app.module.ts
import { SwipeVertical } from '../directives/swipe-vertical.directive';
@NgModule({
declarations: [
SwipeVertical
]
这是我的家。
import { SwipeVertical } from "../../directives/swipe-vertical.directive.ts";
@Component({
selector: 'page-home',
templateUrl: 'home.html',
})
在home.html中我将使用:
<img class="imgUser" (onSwipeUp)="getLike(user, $event)" [src]="user.imgLink">
我的指示swipe-vertical.directive.ts
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]'
})
export class SwipeVertical implements OnInit, OnDestroy {
@Output() onSwipeUp = new EventEmitter();
@Output() onSwipeDown = new EventEmitter();
private el: HTMLElement;
private swipeGesture: Gesture;
//private swipeDownGesture: Gesture;
constructor(el: ElementRef) {
this.el = el.nativeElement;
}
ngOnInit() {
this.swipeGesture = new Gesture(this.el, {
recognizers: [
[Hammer.Swipe, {direction: Hammer.DIRECTION_VERTICAL}]
]
});
this.swipeGesture.listen();
this.swipeGesture.on('swipeup', e => {
this.onSwipeUp.emit({ el: this.el });
});
this.swipeGesture.on('swipedown', e => {
this.onSwipeDown.emit({ el: this.el });
});
}
ngOnDestroy() {
this.swipeGesture.destroy();
}
}
没有错误,但指令(onSwipeUp)不起作用.. 也许添加这样的部分? :
host: {
"[onSwipeUp]": "SwipeUp"
}
非常感谢你的帮助!我很感激 路易斯:)