【问题标题】:Press event is not fired on Ionic 5在 Ionic 5 上未触发 Press 事件
【发布时间】:2021-01-05 15:40:11
【问题描述】:

我想通过将(press) 添加到每个ion-item-sliding 来对多个项目(ion-item-sliding 的列表)执行多项选择,并且似乎永远不会触发按下事件。我将新闻发布会移至ion-item,但仍然没有发生任何事情。然后我尝试直接在ion-button 上测试新闻事件,发现新闻事件是问题所在,因为当我将其更改为单击时,它工作正常。这是我尝试过的:

<ion-button (press)="itemPressed()">Test</ion-button>
itemPressed() {
    console.log("expecting to work");
}

【问题讨论】:

  • 你想在离子按钮中实现长按吗?
  • 不是在离子按钮上而是在ion-item-sliding :) 我在这里使用离子按钮只是为了表明按下事件没有被触发
  • 请查看我的回答

标签: angular ionic-framework


【解决方案1】:

除了@Arj 1411 的回答,在“@angular/platform-b​​rowser”导入中添加HammerModule,这应该可以工作。

【讨论】:

  • 非常感谢!这是丢失的部分
【解决方案2】:

您好,您可以使用Hammer.js实现长按

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

2.on 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);
}

试试这个。如果这没有按预期工作,请告诉我。我将编辑我的答案

【讨论】:

  • 我在一小时前通过此链接medium.com/madewithply/ionic-4-long-press-gestures-96cf1e44098b 尝试过此操作,但仍然没有任何反应。
  • 您可以编辑您的问题并添加您尝试过的内容吗?
  • 我可以看到您使用的是 (press) 而不是 (pressup)。
  • 我也从链接复制粘贴的代码,但没有任何效果。导入中缺少 HammerModule。谢谢先生的麻烦。
  • 没关系。如果您找到合适的答案,请将其标记为已接受。
【解决方案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 long press event on cards

【讨论】:

  • 首先感谢您的回答。我试过tappable (tap),但它也没有触发任何东西,我不能使用点击,因为我只想在其中一个项目被长按时多选。
  • 你能告诉我..你的选择框看起来如何..你想如何选择多个项目..基本上你想要 ionic5 正确的长按事件?
  • 感谢您的链接。我对其进行了测试,它运行良好:)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-12-08
  • 2020-03-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-05-09
  • 1970-01-01
相关资源
最近更新 更多