Ionic 2 - 设置"long press"事件指令的回调

Question

我正在尝试在元素上添加自定义的longpress事件指令，因为(press(=" callback_function(("将导致离子列表将无法再滚动了。是否错误，我发现我需要添加一个自定义手势指令，以增加对新属性的支持，在这种情况下，我称其为longpress。而且它效果很好，除了我没有如何添加回调函数： - (

我已经遵循了一个教程(http://roblouie.com/article/198/using-gestures-in-the-the-ionic-2-beta/(

在 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();
  }
}

in 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

对于任何仍然有这个问题的人，我遇到了非常相似的事情，斯特恩的答案对于弄清楚添加回调非常有帮助。

但是，我想添加一点澄清，因为我认为应该做出"按"one_answers"释放"(或" prastup"(之间的区别。

根据Hammerjs Docs(Ionic用于手势(，有一个"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>

希望添加一些信息/清晰度。

Answer 2

好吧，所以我在很棒的离子松弛聊天网站(https://ionic-worldwide.slack.com(上轻轻地了解了解决方案 - 我需要使用输出和EventEmitter

在导入部分中，它必须看起来像这样：

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

在 class 中，我必须添加 @output EventEmitter ：

export class PressDirective implements OnInit, OnDestroy {
  el: HTMLElement;
  pressGesture: Gesture;
  @Output('long-press') onPressRelease: EventEmitter<any> = new EventEmitter();

和 on('press'，...( ngoninit 必须看起来像这样：

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

现在，模板支持添加(long-press)="showActionSheet(object)"：

<ion-col (long-press)="showActionSheet(object)">

是的，我也将其从longpress更改为长压..对我来说看起来更好..

Answer 3

我能够通过在应用模块中提供Hammer_gesture_config在离子V4中解决此问题。请按照以下链接进行解决方案：垂直滚动不使用Hammerjs和Angular2