ionic2
Solución para 'show-delete' en deprecación

Solución

Estoy desarrollando una aplicación móvil que usa ionic 2 con Angular 2.

Tengo una lista de iones llena de iones artículos. Quiero que esos iones ión tengan la capacidad de ser eliminados si es necesario, tal como se presenta aquí en el sitio web iónico.

Sin embargo, muchas cosas han cambiado en el ionic 2 desde que la primera versión y el estilo anterior de un botón que abre todo el elemento de ión a la vez ya no es posible ya que ya no se admiten la eliminación de programas y la reordenación de programas . La única opción disponible es tener el ión-elemento deslizante como ión-elemento, lo que nos da la posibilidad de deslizar cada elemento uno a la vez para revelar el botón Eliminar.

Eso no es lo que quería. Quería un botón que abra todos los iones al mismo tiempo.

Después de dedicar un tiempo a eso, se me ocurrió una solución de trabajo y logré el resultado deseado con ionic 2, y lo compartiré con usted.

Aquí está mi solución:

En el archivo .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>

y para la lista:

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

En el archivo .ts , primero haga sus importaciones:

import { ViewChild } from '@angular/core';
import { Item } from 'ionic-angular';
import { ItemSliding, List } from 'ionic-angular';

luego refiérase al elemento html declarando un ViewChild:

@ViewChild(List) list: List;

Finalmente, agrega tus clases para manejar el trabajo:

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

Luego la clase de apertura:

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)")
}

Y la clase de clausura:

private closeSlide(itemSlide: ItemSliding) {
  itemSlide.close();
  itemSlide.setCssClass("active-sliding", false);
  itemSlide.setCssClass("active-slide", false);
  itemSlide.setCssClass("active-options-left", false);

}

Espero que te sirva de ayuda.

Disfruta y buena codificación ...