Ionic 4：如何在项目打开时抑制 <ion-sliding-item> 上的单击操作？答案

【问题标题】：Ionic 4: How to Suppress Click action on <ion-sliding-item> when items are open?Ionic 4：如何在项目打开时抑制 <ion-sliding-item> 上的单击操作？
【发布时间】：2019-09-15 11:34:01
【问题描述】：

我正在使用<ion-list> 和<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) 事件。

我想阻止这个点击事件。我读过documentation 并看到<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，即使滑动项实际上已关闭。我怀疑这是因为关闭操作是自动发生的，并且在调用我的函数时，该项目已经关闭。

我的总体目标是在滑块打开时防止(click) 事件。如果closeSlidingItems() 方法能返回正确的值，我当前的代码就可以工作。

当我自己调用closeSlidingItems() 时，有什么方法可以阻止滑动项目的自动关闭以获得正确的结果？

除了(click) 之外，我还应该使用其他事件吗？

我有什么其他想法可以让它工作吗？

StackBlitz of issue

【问题讨论】：

它澄清你的问题究竟是什么？您要停止哪个点击事件？
@IraW 我试图阻止任何上的单击事件，只要打开任何滑块项。我想我真的不需要抑制点击事件，但我希望根据是否有任何滑块项处于打开位置来做出不同的行为。
我会添加一个类，当其他项目打开时将pointer-events: none; 应用于其他项目。

标签： angular ionic-framework ionic4

【解决方案1】：

您收到 false 是因为单击时上下文错误。

closeSlidingItems() 如果 actual 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') 仅在this 上下文中为您提供第一个匹配的ion-item-sliding。而且当前打开的也不一样（因为你点击了不同的ion-item-sliding）。

所以没有默认的方式，AFAIK，做你想做的事。但是，IonItemSliding 组件暴露了ionDrag 事件，该事件在您滑动项目时触发。该事件具有detail.ratio 属性，当ion-item-options 打开时，该属性变为1。因此，您可以通过每次单击 goToDetail() 时重置 ration 值来传递此信息。

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

【讨论】：

感谢您的信息。我可以尝试使用(ionDrag)。我会提到，我认为上下文不一定是错误的。如果从按钮触发我的goToDetail() 方法（而不是离子列表点击事件），.closeSlidingItems() 调用会根据滑动项是否打开返回正确的真或假值。
不，如果您单击其他未打开的菜单项，则无法获取true。我从源代码发布了一个方法。 this 的上下文来自点击事件。单击事件发生在一个菜单项上，您会看到该方法稍后会发生什么。提供一个 stackblitz 或分享你的代码，然后我可以解释
也许这不是被命中的代码，或者有更多的代码被命中。当我从离子项目以外的任何地方（单击）调用该函数时，当任何滑块打开时，我肯定会恢复“真实”。此外，这就是文档所说的应该返回的内容。无论如何，我可以通过使用您使用 ionDrag 的建议来解决这个问题。所以谢谢你！
不确定你的情况，如果你提供你的代码，我可以调查一下，但我把 actual 字加粗是有原因的。您在文档中错过了这个词，并且误解了这种方法的含义。如果您在从其他地方调用方法时得到 true，则仍然意味着上下文是当前打开的确切菜单项。如果需要有关 Ionic 的任何帮助，请随时提供一些代码
这里有一个stackblitz 展示了我描述的行为。重现良好行为： 1) 滑动打开项目 2) 单击按钮 3) 结果：项目已关闭 && 日志消息表明项目已关闭。要重现不良行为：1) 滑动打开一个项目 2) 单击另一个项目 3) 结果：项目已关闭 && 日志消息指示项目未关闭注意两个点击事件触发相同的 closeOpenItems() 方法。

【解决方案2】：

大家好

<ion-item-sliding #itemSliding *ngFor="elemets..." (touchmove)="itemSliding.open('end');">

这就是解决方案:)

【讨论】：