离子3关闭离子项目滑动

Question

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

点击提交后，我想关闭按钮并隐藏“提交”。我似乎无法找到关闭滑动元素的任何文档，这些元素与按钮或其周围的任何黑客有关。有什么建议？在Ionic工作3 ...

Answer 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();
  }
}

Answer 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();
  }
}

Answer 3

其他答案是完全正确的，但是我们不需要通过tp调用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()" 将它们分开，则可以调用的方法不止方法