Question

我正在尝试在元素上添加自定义longPress事件指令，因为（press）=“callback_function（）”将导致ion-list将无法再滚动。错误与否，我发现我需要添加一个自定义手势指令，它将添加对新属性的支持，在这种情况下我称之为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's answer对于确定添加回调非常有帮助。

但是，我想补充一点澄清，因为我认为＆＃34; press＆＃34;之间的区别。和＆＃34;发布＆＃34; （或者＃34;按下＆＃34;）应该制作。

根据HammerJS文档（Gestures的离子用途），有一个"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） - 我需要使用Output和EventEmitter

在导入部分中，它必须如下所示：

在类中，我必须添加 @Output EventEmitter ：

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

ngOnInit 中的 on（'press'，...）必须如下所示：

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

现在模板支持添加this.pressGesture.on('press', (event) => { this.onPressRelease.emit('released'); });：

(long-press)="showActionSheet(object)"

是的，我也把它从longPress更改为长按..对我来说看起来更好..

Answer 3

通过在应用模块中提供HAMMER_GESTURE_CONFIG，我能够在Ionic v4中解决此问题。请通过以下链接获取解决方案：Vertical scroll is not working with HammerJS and Angular2

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

3 个答案: