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

问题描述

我正在尝试在元素上添加自定义 longPress 事件指令，因为 (press)="callback_function()" 将导致 ion-list 无法再滚动.不管有没有错误，我发现我需要添加一个自定义手势指令来添加对新属性的支持，在这种情况下我称之为 longPress.它工作得很好，除了我不知道如何添加回调函数:-)

I am trying to add a custom longPress event directive on elements, since (press)="callback_function()" will result in ion-list won't be able to scroll anymore. Bug or not, i've found out that I need to add a custom gesture directive that would add support for a new attribute, in this case I call it longPress. and it works great, except I don't get how to add the callback function :-)

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

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

The "press-directive" is created in src/components/press-directive/press-directive.js and looks like this:

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 我已在导入中添加了指令:

In home.module.ts I have added the directive in an import:

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

我已经在声明中添加了它:

and I've added it in the declaration:

declarations: [
  Home,
  PressDirective
],

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

In home.html, I implement it in a like this:

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

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

I've cut out most of the unimportant stuff :-)

当我长按时，它会返回以下内容:

And when I do a long press, it will return the following:

console.log('pressed!!');

但我不知道如何支持模板元素的实际回调函数.

But I can't get my head wrapped around how to support the actual callback function from the template element.

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

Any help or hint would be appreciated..

推荐答案

好的，所以我在很棒的 ionic slack 聊天网站 (https://ionic-worldwide.slack.com) - 我需要使用 Output 和 EventEmitter

Alright, so I was gently informed of the solution on the awesome ionic slack chat site (https://ionic-worldwide.slack.com) - I needed to use Output and EventEmitter

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

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

在类中，我必须添加一个@Output EventEmitter:

In the class, I had to add an @Output EventEmitter:

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

ngOnInit 内部的 on('press',...) 必须如下所示:

And the on('press',...) inside ngOnInit had to look like this:

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

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

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

是的，我也将它从 longPress 更改为 long-press.. 对我来说看起来更好..

And yes, I also changed it from longPress to long-press.. just looked better for me..

这篇关于Ionic 2 - 为“长按"设置回调事件指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！