Ionischen 2 - Einstellung Rückruf für "langes drücken" - Ereignis-Richtlinie

Ich versuche Sie zum hinzufügen einer benutzerdefinierten longPress event-Richtlinie über die Elemente, da (drücken)="callback_function()" führt zu Ionen-Liste werden nicht in der Lage, um zu Blättern nicht mehr. Bug oder nicht, ich habe herausgefunden, dass ich hinzufügen müssen, um eine Geste der Richtlinie, das wäre die Unterstützung für ein neues Attribut, in diesem Fall nenne ich es longPress. und es funktioniert Super, außer, dass ich nicht bekommen, wie Sie die Funktion Rückruf 🙂

Habe ich folgte ein tutorial (http://roblouie.com/article/198/using-gestures-in-the-ionic-2-beta/)

Den "press-Richtlinie" erstellt, in src/components/press-directive/press-directive.js und sieht wie folgt aus:

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 Hause.- Modul.ts ich habe die Richtlinie in einer import:

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

und ich habe es in der Erklärung:

declarations: [
  Home,
  PressDirective
],

In home.html habe, dann setze ich es in eine wie diese:

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

Habe ich heraus geschnitten, die meisten die unwichtigen Sachen 🙂

Und wenn ich eine Taste lange drücken, es wird Folgendes zurückgegeben:

console.log('pressed!!');

Aber ich kann nicht mein Kopf gewickelt, wie die Unterstützung der eigentlichen callback-Funktion aus dem template-element.

Jede Hilfe oder Hinweis wäre willkommen..

InformationsquelleAutor Steen Kruse | 2017-04-19
  1. 5

    Wer hat noch dieses problem, lief ich in einer sehr ähnlichen Sache, und Steen Antwort war sehr hilfreich, um herauszufinden, hinzufügen einer callback.

    Jedoch wollte ich hinzufügen, ein wenig Aufklärung, denn ich denke, die Unterscheidung zwischen "press" und "release" (oder "pressup") gemacht werden sollte.

    Laut HammerJS docs (die Ionische verwendet für Gesten), es ist ein "press" Ereignis, und auch ein "pressup" Ereignis, das ausgelöst wird, wenn die Presse veröffentlicht.

    Können Sie tatsächlich enthalten eine @Output für jedes Ereignis (press und 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();

    Dann, in der @ngOnInit, reagieren auf jede Veranstaltung mit dem jeweiligen emitter:**

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

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

    Diese Weise können Sie support eine separate callback-Funktion für jede Geste Ereignis (in der template/Komponente):

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

    Hoffentlich, fügt einige Infos/Klarheit.

    • Hallo ich habe eine Frage zu der Selektor-syntax.. ich habe versucht, hinzufügen 2-Selektoren in der gleichen Richtlinie, aber es hat nicht funktioniert, Wie wir es tun für Sie beide lange drücken und lang drücken-in der gleichen Richtlinie. vielen Dank im Voraus.
    • Ich glaube, dass können Sie nur einen Wahlschalter, aber Sie können 2 Output oder EventEmitters (oder so viele wie die Anzahl der gesten, die Sie wollen, um zu reagieren). So können Sie eine Bindung zu beiden Veranstaltungen. Ich schrieb einen Beitrag über diese hier und hier ist ein gist. Ist es das, was Sie fordern?
    InformationsquelleAutor tyguy
  2. 3

    Okay, also ich war sanft, informiert der Lösung auf die genial Ionischen slack-chat-Website (https://ionic-worldwide.slack.com) - ich brauchte, um die Ausgabe und EventEmitter

    In der Importieren Abschnitt, es musste so Aussehen:

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

    In der Klasse, ich musste hinzufügen eine @Ausgabe EventEmitter:

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

    Und die auf ("drücken",...) innen ngOnInit musste so Aussehen:

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

    Nun die Vorlage unterstützt das hinzufügen (long-press)="showActionSheet(object)":

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

    Und ja, auch ich änderte es von longPress zu lange-drücken.. sah einfach besser für mich..

    • wie behandeln Sie Ihre release-event?
    InformationsquelleAutor Steen Kruse
  3. 0

    War ich in der Lage, dieses Problem zu beheben, in Ionischer v4, indem HAMMER_GESTURE_CONFIG in-app-Modul. Folgen Sie diesem link für die Lösung: Vertikales scrollen funktioniert nicht mit HammerJS und Angular2

    InformationsquelleAutor Arshad
Schreibe einen Kommentar