ionic2
'show-delete'에 대한 대안 천칭
수색…
해결책
Angular 2와 함께 이온 2를 사용하는 모바일 앱을 개발 중입니다.
이온 표를 채운 이온 표가 있습니다. 나는 그 이온 항목이 제시된 필요한 경우 기능을 삭제하고 싶지 여기 이온의 웹 사이트에.
그러나 쇼 - 삭제 와 쇼 재주문 이 더 이상 지원되지 않기 때문에 첫 번째 버전 이후에 이온 2 에서 많은 변화가 있었고 위의 하나의 버튼 스타일은 모든 이온 항목 을 열 수 없게되었습니다. 사용할 수있는 유일한 옵션은 ion-item-sliding 을 ion-item로 사용하는 것입니다. 이렇게하면 삭제 버튼을 나타 내기 위해 각 항목을 한 번에 하나씩 슬라이드 할 수 있습니다.
그것은 내가 원하는 것이 아닙니다. 나는 동시에 모든 ion-item을 여는 버튼 하나를 원했습니다.
얼마간의 시간을 보낸 후, 나는 작동하는 해결책을 생각해 냈고 이온 2를 사용하여 원하는 결과를 얻었습니다. 나는 그것을 여러분과 공유 할 것입니다.
여기 내 해결책은 :
.html 파일에서 :
<ion-header>
<ion-navbar>
<ion-buttons start (click)="manageSlide()">
<button>
<ion-icon name="ios-remove"></ion-icon>
</button>
</ion-buttons>
<ion-title>PageName</ion-title>
</ion-navbar>
</ion-header>
및 목록 :
<ion-list #list1>
<ion-item-sliding #slidingItem *ngFor="let contact of contacts | sortOrder">
<button #item ion-item>
<p>{{ item.details }}</p>
<ion-icon id="listIcon" name="arrow-forward" item-right></ion-icon>
</button>
<ion-item-options side="left">
<button danger (click)="doConfirm(contact, slidingItem)">
<ion-icon name="ios-remove-circle-outline"></ion-icon>
Remove
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
.ts 파일에서 먼저 가져 오기를 수행하십시오.
import { ViewChild } from '@angular/core';
import { Item } from 'ionic-angular';
import { ItemSliding, List } from 'ionic-angular';
다음 ViewChild를 선언하여 html 요소를 참조하십시오.
@ViewChild(List) list: List;
마지막으로 클래스를 추가하여 작업을 처리합니다.
public manageSlide() {
//loop through the list by the number retreived of the number of ion-item-sliding in the list
for (let i = 0; i < this.list.getElementRef().nativeElement.children.length; i++) {
// retreive the current ion-item-sliding
let itemSlide = this.list.getElementRef().nativeElement.children[i].$ionComponent;
// retreive the button to slide within the ion-item-sliding
let item = itemSlide.item;
// retreive the icon
let ic = item._elementRef.nativeElement.children[0].children[1];
if (this.deleteOpened) {
this.closeSlide(itemSlide);
} else {
this.openSlide(itemSlide, item, ic);
}
}
if (this.deleteOpened) {
this.deleteOpened = false;
} else {
this.deleteOpened = true;
}
}
그런 다음 수업 시작 :
private openSlide(itemSlide: ItemSliding, item: Item, inIcon) {
itemSlide.setCssClass("active-sliding", true);
itemSlide.setCssClass("active-slide", true);
itemSlide.setCssClass("active-options-left", true);
item.setCssStyle("transform", "translate3d(72px, 0px, 0px)")
}
그리고 닫는 클래스 :
private closeSlide(itemSlide: ItemSliding) {
itemSlide.close();
itemSlide.setCssClass("active-sliding", false);
itemSlide.setCssClass("active-slide", false);
itemSlide.setCssClass("active-options-left", false);
}
나는 그것이 당신을 도와 줄 수 있기를 바랍니다.
즐기고 좋은 코딩 ...
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow