ionic2
での 'show-delete'の回避策廃止予定

溶液

私は角度2のイオン2を使ってモバイルアプリを開発しています。

私はイオンリストにイオンアイテムを埋めました。私はそれらのイオンアイテムが、イオンウェブサイト上でここに示されているように、必要に応じて削除されることを望みます。

しかし、多くは最初のバージョン以来イオン2に変更されていると1で全てのイオンのアイテムを開く一つのボタンの上のスタイルは、もはやサポートされているショーの削除とshow-再発注するので、もはや可能ではないではありません。使用できる唯一のオプションはイオンアイテムとしてイオンアイテムをスライドさせることです。これにより、削除ボタンを表示するために各アイテムを1つずつスライドさせることができます。

それは私が望んでいたものではありません。私はすべてのイオンアイテムを同時に開く1つのボタンが欲しかった。

しばらく時間を費やした後、私は実用的なソリューションを考え出し、イオン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);

}

私はそれがあなたのうちのいくつかを助けることを願っています。

楽しんでいいコーディング...