Ionic Framework Hold Klick Ereignis

Question

Ist es möglich, eine Schaltfläche zu einem "Hold Click" -Ereignis in TypeScript zuzuweisen?

Like:

<button ion-button icon-only color="royal" (click)="addNote()" (holdclick)="removeNote()"> 

Answer 1

Sie können das press Ereignis (weitere Informationen in der Gestures docs):

import { Component } from '@angular/core'; 

@Component({ 
    templateUrl: 'template.html' 
}) 
export class BasicPage { 

    public press: number = 0; 

    constructor() {} 

    pressEvent(e) { 
    this.press++ 
    } 

} 

Und in der Ansicht:

<ion-card (press)="pressEvent($event)"> 
    <ion-item> 
     Pressed: {{press}} times 
    </ion-item> 
    </ion-card> 

Wenn das nicht genug (Vielleicht brauchen Sie ein längeres Presseereignis in Ihrem Szenario), Sie können yo erstellen Ihr eigenes Gestenereignis durch Erstellen einer benutzerdefinierten Anweisung. Weitere Informationen finden Sie unter this amazing article by roblouie. Der Artikel verwendet eine alte Version von Ionic, aber die Grundidee ist immer noch die gleiche (und so ziemlich der gesamte Code sollte funktionieren wie es ist):

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

@Directive({ 
    selector: '[longPress]' 
}) 
export class PressDirective implements OnInit, OnDestroy { 
    el: HTMLElement; 
    pressGesture: Gesture; 

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

    ngOnInit() { 
    this.pressGesture = new Gesture(this.el, { 
     recognizers: [ 
     [Hammer.Press, {time: 6000}] // Should be pressed for 6 seconds 
     ] 
    }); 
    this.pressGesture.listen(); 
    this.pressGesture.on('press', e => { 
     // Here you could also emit a value and subscribe to it 
     // in the component that hosts the element with the directive 
     console.log('pressed!!'); 
    }); 
    } 

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

Und es dann in Ihrem HTML-Elemente verwenden:

<button longPress>...<button>