ionic2
Soluzione alternativa per "mostra-elimina" in deprecazione

Soluzione

Sto sviluppando un'applicazione mobile con ionic 2 con Angular 2.

Ho una lista di ioni riempita di ioni. Voglio che quegli oggetti ionici abbiano la possibilità di essere cancellati, se necessario, come presentato qui sul sito web ionico.

Tuttavia, molti sono cambiati in ionico 2 poiché la prima versione e lo stile sopra di un pulsante che apre tutti gli elementi ionici in uno non è più possibile poiché lo show-delete e lo show-reorder non sono più supportati. L'unica opzione disponibile è avere un oggetto ion-sliding come elemento ionico, che ci dà la possibilità di far scorrere ogni oggetto uno alla volta per rivelare il pulsante cancella.

Non è quello che volevo. Volevo un pulsante che apra tutto l'oggetto ionico allo stesso tempo.

Dopo aver dedicato un po 'di tempo a questo, ho trovato una soluzione funzionante e sono riuscito a ottenere il risultato desiderato usando ionic 2, e lo condividerò con voi.

Ecco la mia soluzione:

Nel file .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>

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

Nel file .ts , per prima cosa importa le tue importazioni:

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

quindi fai riferimento all'elemento html dichiarando un ViewChild:

@ViewChild(List) list: List;

Infine, aggiungi le tue classi per gestire il lavoro:

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

Quindi la classe di 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)")
}

E il corso di chiusura:

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

}

Spero che possa aiutarti un po 'là fuori.

Goditi e buona codifica ...