[英]ionic 3 Close ion-item-sliding
I have a sliding item that when you swipe it open, it reveals a submit button.我有一个滑动项,当您将其滑动打开时,它会显示一个提交按钮。
After you hit submit, I would like for the button to close and hide the "submit".点击提交后,我希望按钮关闭并隐藏“提交”。 I can't seem to find any documentation for closing sliding elements that relate to buttons or any hacks around it.
我似乎找不到任何文档来关闭与按钮相关的滑动元素或它周围的任何黑客。 Any suggestions?
有什么建议? Working in Ionic 3...
在离子 3 中工作...
Just like you can see in the docs :就像您在文档中看到的一样:
Close the sliding item.
关闭滑动项。 Items can also be closed from the List.
项目也可以从列表中关闭。
The sliding item can be closed by grabbing a reference to
ItemSliding
.可以通过获取对
ItemSliding
的引用来关闭滑动项。 In the below example, the template reference variableslidingItem
is placed on the element and passed to theshare
method.在下面的示例中,模板引用变量
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>
And then:然后:
import { Component } from '@angular/core'; import { ItemSliding } from 'ionic-angular'; @Component({...}) export class MyClass { constructor() { } share(slidingItem: ItemSliding) { slidingItem.close(); } }
From the 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>
TypeScript:打字稿:
import { Component } from '@angular/core';
import { ItemSliding } from 'ionic-angular';
@Component({...})
export class MyClass {
constructor() { }
share(slidingItem: ItemSliding) {
slidingItem.close();
}
}
the other answers are totaly correct but we don't need to pass a refrence of component just tp call close method , I usually try to do something like this logic if possible on the template,and here is a prefect example where we just want to call a method related to component.其他答案是完全正确的,但我们不需要传递组件的引用,只是 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>
with event binding we can call more than method if we separate them with
;
使用事件绑定,如果我们将它们分开,我们可以调用多个方法
;
like this(click)="share();slidingItem.close()"
像这样
(click)="share();slidingItem.close()"
Ionic 5+ / Angular 12+离子 5+ / 角 12+
This works for me: ie I need to close all the opened sliding items when the page leaves.这对我有用:即我需要在页面离开时关闭所有打开的滑动项目。
.html .html
<ion-list #slidingList>
//sliding code
</ion-list>
.ts .ts
@ViewChild('slidingList') slidingList: IonList;
constructor() {}
ionViewDidLeave(): void {
this.slidingList.closeSlidingItems();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.