Ionic 2 - 为"长按"事件指令设置回调

Question

我试图在元素上添加自定义longPress事件指令,因为(按)="callback_function()"将导致离子列表将无法再滚动.错误与否,我发现我需要添加一个自定义手势指令,它将添加对新属性的支持,在这种情况下我称之为longPress.它工作得很好,除了我没有得到如何添加回调函数:-)

我已经按照教程(http://roblouie.com/article/198/using-gestures-in-the-ionic-2-beta/)

"press-directive"是在src/components/press-directive/press-directive.js中创建的,如下所示:

import { Directive, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { Gesture } from "ionic-angular/gestures/gesture";

/**
 * Generated class for the PressDirective directive.
 *
 * See https://angular.io/docs/ts/latest/api/core/index/DirectiveMetadata-class.html
 * for more info on Angular Directives.
 */

@Directive({
  selector: '[longPress]' // Attribute selector
})


export class PressDirective implements OnInit, OnDestroy {
  el: HTMLElement;
  pressGesture: Gesture;

  constructor(el: ElementRef) {
    this.el = el.nativeElement;
  }

  public theCallback() {

  }

  ngOnInit() {
    this.pressGesture = new Gesture(this.el);
    this.pressGesture.listen();

    // instead of this..
    this.pressGesture.on('press', (event) => {
      console.log('pressed!!');
    });

    // i want the callback to come from the template like this:
    // <ion-col (longPress)="showActionSheet(object)">
  }

  ngOnDestroy() {
    this.pressGesture.destroy();
  }
}

在home.module.ts中,我在导入中添加了指令:

import { PressDirective } from "../../components/press-directive/press-directive";

我在声明中添加了它:

declarations: [
  Home,
  PressDirective
],

在home.html中,我实现它是这样的:

<ion-col (longPress)="showActionSheet(relevantObject)">...

我已经删除了大部分不重要的东西:-)

当我长按时,它将返回以下内容:

console.log('pressed!!');

但我无法理解如何从模板元素支持实际的回调函数.

任何帮助或提示将不胜感激..

Answer 1

对于仍有这个问题的人来说,我遇到了一个非常类似的事情,而Steen的回答对于确定添加回调非常有帮助.

但是,我想补充一点澄清,因为我认为应该做出"按压"和"释放"(或"按压")之间的区别.

根据HammerJS文档(手势的离子用途),有一个"press"事件,也有一个"pressup"事件,在新闻发布时被解雇.

实际上,您可以@Output为每个事件(press和pressup)包含一个:

/*
 * The first output will emit when the timeout is reached for press,
 * and the second will emit when the press gesture is released.
 */ 

@Output('long-press') onPress: EventEmitter<any> = new EventEmitter();
@Output('long-press-up') onPressUp: EventEmitter<any> = new EventEmitter();

然后,在@ngOnInit每个相应的发射器响应每个事件:**

this.pressGesture.on('press', (event) => {
  this.onPress.emit(event);
});

this.pressGesture.on('pressup', (event) => {
  this.onPressUp.emit(event);
});

这样,您可以为每个手势事件(在模板/组件中)支持单独的回调函数:

<ion-col (long-press)="longPressed(object)" (long-press-up)="longPressReleased(object)">
  ...
</ion-col>

希望这增加了一些信息/清晰度.