ionic2
Solution de contournement pour 'show-delete' dans désapprobation

Solution

Je développe une application mobile utilisant ionic 2 avec Angular 2.

J'ai une liste d'ions remplie d'ions. Je souhaite que ces éléments puissent être supprimés si nécessaire, comme présenté ici sur le site Web ionique.

Cependant, beaucoup de choses ont changé dans ionic 2 depuis la première version et le style d'un bouton ouvrant tous les éléments ioniques ci- dessus n'est plus possible puisque show-delete et show-reorder ne sont plus pris en charge. La seule option disponible consiste à faire glisser les éléments ioniques en tant qu'élément ionique, ce qui nous permet de faire glisser chaque élément un par un afin de révéler le bouton de suppression.

Ce n'est pas ce que je voulais. Je voulais un bouton qui ouvre tous les éléments ioniques en même temps.

Après avoir passé un peu de temps là-dessus, j'ai trouvé une solution de travail et réussi à atteindre le résultat souhaité en utilisant ionic 2, et je vais le partager avec vous.

Voici ma solution:

Dans le fichier .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>

et pour la liste:

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

Dans le fichier .ts , commencez par importer:

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

puis se référer à l'élément html en déclarant un ViewChild:

@ViewChild(List) list: List;

Enfin, ajoutez vos classes pour gérer le travail:

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

Ensuite, la classe d'ouverture:

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

Et la classe de clôture:

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

}

J'espère que cela vous aidera.

Bonne lecture et bon codage ...