ionic 3 关闭 ion-item-sliding答案

【问题标题】：ionic 3 Close ion-item-slidingionic 3 关闭 ion-item-sliding
【发布时间】：2018-06-09 05:55:41
【问题描述】：

我有一个滑动项，当您将其滑动打开时，它会显示一个提交按钮。

点击提交后，我希望按钮关闭并隐藏“提交”。我似乎找不到任何文档来关闭与按钮相关的滑动元素或围绕它的任何黑客。有什么建议？在 Ionic 3 中工作...

【问题讨论】：

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案1】：

就像你看到的一样in the docs：

关闭滑动项。也可以从列表中关闭项目。

可以通过抓取一个引用来关闭滑动项 ItemSliding。在下面的示例中，模板引用变量 slidingItem 放置在元素上并传递给share 方法。
<ion-list>
  <ion-item-sliding #slidingItem>
    <ion-item>
      Item
    </ion-item>
    <ion-item-options>
      <button ion-button (click)="share(slidingItem)">Share</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

然后：

import { Component } from '@angular/core';
import { ItemSliding } from 'ionic-angular';

@Component({...})
export class MyClass {
  constructor() { }

  share(slidingItem: ItemSliding) {
    slidingItem.close();
  }
}

【讨论】：

在旁边使用 ion-item 标签时需要使用 ion-item-sliding

【解决方案2】：

来自Ionic Documentation：

HTML：

<ion-list>
  <ion-item-sliding #slidingItem>
    <ion-item>
      Item
    </ion-item>
    <ion-item-options>
      <button ion-button (click)="share(slidingItem)">Share</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

打字稿：

import { Component } from '@angular/core';
import { ItemSliding } from 'ionic-angular';

@Component({...})
export class MyClass {
  constructor() { }

  share(slidingItem: ItemSliding) {
    slidingItem.close();
  }
}

【讨论】：

【解决方案3】：

其他答案是完全正确的，但我们不需要传递组件的引用，只需 tp call close 方法，如果可能的话，我通常会尝试在模板上执行类似这样的逻辑，这是一个完美的示例，我们只想调用组件相关的方法。

<ion-list>
  <ion-item-sliding #slidingItem>
    <ion-item>
      Item
    </ion-item>
    <ion-item-options>
     <button ion-button (click)="share();slidingItem.close()">Share</button>
     <button ion-button routerLink="/" (click)="slidingItem.close()"> Det</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

使用事件绑定，如果我们用 ; 将它们分开，我们可以调用更多的方法，例如 (click)="share();slidingItem.close()"

【讨论】：

您是否对此进行了测试，并且可以在不涉及 TS 代码的情况下从 html 模板中关闭 slideItem？我收到TypeError: Cannot read property 'open' of undefined 谢谢

【解决方案4】：

Ionic 5+ / Angular 12+

这对我有用：即我需要在页面离开时关闭所有打开的滑动项。

.html

<ion-list #slidingList>  
  //sliding code
</ion-list>

.ts

 @ViewChild('slidingList') slidingList: IonList;

  constructor() {}

 ionViewDidLeave(): void {
   this.slidingList.closeSlidingItems();
  }

【讨论】：