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);

}

나는 그것이 당신을 도와 줄 수 있기를 바랍니다.

즐기고 좋은 코딩 ...