时间戳

首页 > 解决方案 > Ionic 4：如何抑制点击动作什么时候打开项目？

angular - Ionic 4：如何抑制点击动作什么时候打开项目？

问题描述

我正在使用<ion-list>with <ion-sliding-item>。内部项目有一个(click)事件(click)="goToDetail(message.id)"。 

<ion-list #messageList>
    <ion-item-sliding *ngFor="let message of messages">
        <ion-item detail (click)="goToDetail(message.id)">
            <ion-label>
                {{ message.text }}
            </ion-label>
        </ion-item>
        <ion-item-options>
            <ion-item-option (click)="confirmDelete(message.id)">Delete</ion-item-option>
        </ion-item-options>
    </ion-item-sliding>
</ion-list>

通常，当单击该项目时，我希望触发单击事件。

但是，如果我滑动其中一个项目，显示“删除”选项，然后单击另一个项目，则滑动项目关闭，然后触发另一个项目的 (click) 事件。

滑块打开显示删除选项的屏幕截图

我想阻止这个点击事件。我已经阅读了文档并看到了<ion-list>一个closeSlidingItems()方法。所以，我希望我可以简单地将我的点击事件更改为：

(click)="messageList.closeSlidingItems() || goToDetail(message.id)"

但是，closeSlidingItems() 方法返回一个承诺，而不是布尔值。好的，没问题，我想goToDetail()用这个检查来包装我的函数。

public goToDetail(threadId) {
    this.messageList.closeSlidingItems()
        .then(sliderWasClosed => {
            if (!sliderWasClosed) {
                this.nav.navigateForward('app/conversation/' + threadId);
            }
        });
}

但是，我发现false即使滑动项实际上已关闭，promise 也总是返回。我怀疑这是因为关闭操作会自动发生，并且在调用我的函数时，该项目已经关闭。

我的总体目标是防止(click)滑块打开时的事件。closeSlidingItems()如果该方法返回正确的值，我当前的代码将起作用。

有没有办法可以防止这种滑动项目的自动关闭，以便在我打电话给closeSlidingItems()自己时获得正确的结果？

除了我应该使用的另一个事件(click)吗？

还有其他想法如何让这个工作吗？

StackBlitz 问题

标签： angularionic-frameworkionic4

解决方案

你得到false是因为当你点击时上下文是错误的。

closeSlidingItems() 如果实际的ion-item-sliding 关闭，则返回 true

这是来自docs的方法：

  async closeSlidingItems(): Promise<boolean> {
    const item = this.el.querySelector('ion-item-sliding');
    if (item && item.closeOpened) {
      return item.closeOpened();
    }
    return false;
  }

this.el.querySelector('ion-item-sliding')ion-item-sliding只为您提供this上下文中的第一个匹配项。并且当前打开的不一样（因为您点击不同的ion-item-sliding）。

所以没有默认的方式，AFAIK，做你想做的事。但是，IonItemSliding 组件会公开ionDrag事件，当您滑动项目时会触发该事件。该事件具有detail.ratio属性，即1何时ion-item-options打开。ration因此，您可以通过每次单击时重置 value 来对此进行中继goToDetail()。

<ion-item-sliding (ionDrag)="dragEvent($event.detail.ratio)" *ngFor="let message of messages">

推荐阅读