Ionic Framework holdイベントをクリックする

Question

TypeScriptの "hold click"イベントにボタンを割り当てることはできますか？

同様：

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

Answer 1

あなたはpressイベント（Gestures docsで詳細情報）を使用することができます：それは十分ではない場合

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

：

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

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

    public press: number = 0; 

    constructor() {} 

    pressEvent(e) { 
    this.press++ 
    } 

} 

とビューでの（あなたのシナリオでもっと長いプレスイベントが必要なのかもしれません）、あなたはカスタムディレクティブを作成して、自分自身のジェスチャーイベントを作成します。詳細はthis amazing article by roblouieを参照してください。記事は、イオンの古いバージョンを使用していますが、主な考え方は同じです（そしてほとんどすべてのコードは、それがあるように動作するはずです）：

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

そして、あなたのhtml要素でそれを使用します。

<button longPress>...<button>