是否可以将按钮分配给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>