Ionic 5中未触发按下事件

Question

我希望在多个项目（ion-item-sliding列表）中实现多重选择，当其中一个项目被按住几秒钟时，通过将(press)添加到每个 ion-item-sliding 来实现，但似乎按压事件从未触发。我将按压事件移动到 ion-item ，但仍然没有任何反应。然后我尝试直接在 ion-button 上测试按压事件，并发现按压事件是问题的根源，因为当我将其更改为点击时，它可以完美工作。这是我尝试过的：

<ion-button (press)="itemPressed()">Test</ion-button>

itemPressed() {
    console.log("expecting to work");
}

- Michaël Randria

---

你想在Ionic按钮中实现长按功能吗？ - Arj 1411

不是在ionic按钮上，而是在ion-item-sliding上 :) 我这里使用ionic按钮只是为了说明按下事件没有被触发。 - Michaël Randria

请检查我的答案。 - Arj 1411

Answer 1

除了@Arj 1411的回答外，还需在'@angular/platform-browser'导入中添加HammerModule，这样就可以工作了。

- Bary

---

非常感谢！这是缺失的一部分。 - Michaël Randria

Answer 2

目前来看，对于Ionic 6来说，这可能是最好的选择。

https://forum.ionicframework.com/t/ionic-5-long-press-gesture-example/188746/7

它的工作非常出色，而且您不需要安装任何模块。

- jalogar

Answer 3

我认为你可以使用下面提到的触摸和点击事件，而不是使用按压事件。

<ion-button (click)="itemPressed()">Test</ion-button> 

或者

<ion-button tappable (tap)="itemPressed()">Test</ion-button> 

如果您想使用长按事件，则可以在下面的URL上使用NPM插件，这可能会对您有所帮助。

https://www.npmjs.com/package/ionic-long-press

在卡片上使用Ionic长按事件

- Taylor Rahul

---

首先感谢您的回答。我尝试了tappable (tap)，但它也没有触发任何东西，而且我不能使用click，因为我只想在长按其中一个项目时才能多选项目。 - Michaël Randria

请问您能否展示一下您的选择框长什么样子？您想如何选择多个项目？基本上您需要使用Ionic5的长按事件，对吗？ - Taylor Rahul

谢谢提供链接。我测试过了，完美地运行了 :) - Michaël Randria

Answer 4

你可以使用Hammer.js实现长按功能。

1.从npm install hammerjs — save安装Hammer.js。

2.在src/main.ts文件中进行以下更改：

 import { enableProdMode } from '@angular/core';
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { AppModule } from './app/app.module';
    import { environment } from './environments/environment';
    **import "hammerjs";** 
    
    if (environment.production) {
      enableProdMode();
    }
platformBrowserDynamic().bootstrapModule(AppModule)   .catch(err => console.log(err));

3.在您的模板和组件文件上

<ion-button (press)="onPress($event)" (pressup)="onPressUp($event)"> Test </ion-button>

onPress($event) {
    console.log("onPress", $event);
}

onPressUp($event) {
    console.log("onPressUp", $event);
}

试一下这个。如果这个没有按预期工作，请告诉我。我会编辑我的回答。

- Arj 1411

---

我一个小时前尝试了这个链接中的内容：https://medium.com/madewithply/ionic-4-long-press-gestures-96cf1e44098b，但仍然没有任何反应。 - Michaël Randria

你能否编辑你的问题并添加你尝试过什么？ - Arj 1411

我看到你正在使用 (press) 而不是 (pressup)。 - Arj 1411

我也复制粘贴了链接中的代码，但是什么都没发生。导入中缺少HammerModule。感谢您的麻烦，先生。 - Michaël Randria

没问题。如果您认为答案适合，请标记为已接受。 - Arj 1411

Answer 5

最好的解决方案实际上是使用contextmenu事件，而不是press。这是本地支持的，因此不需要HammerJS（或其他任何东西）。

- Sygmoral