离子框架保留点击事件



是否可以将按钮分配给Typescript中的"保持单击"事件?

喜欢:

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

您可以使用press事件(手势文档中的更多信息(:

import { Component } from '@angular/core';
@Component({
  templateUrl: 'template.html'
})
export class BasicPage {
  public press: number = 0;
  constructor() {}
  pressEvent(e) {
    this.press++
  }
}

和视图:

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

如果这还不够(也许您需要在情况下需要更长的新闻事件(,则可以通过创建自定义指令来创建自己的手势事件。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>

相关内容

  • 没有找到相关文章

最新更新