ionic2
Tijdelijke oplossing voor 'show-delete' in afkeuring

Oplossing

Ik ontwikkel een mobiele app met ionic 2 met Angular 2.

Ik heb een ionenlijst gevulde ionenitems. Ik wil dat dat ion-item de mogelijkheid heeft om te worden verwijderd indien nodig, zoals hier op de ionische website wordt gepresenteerd.

Er is echter veel veranderd in ionic 2 sinds de eerste versie en de bovenstaande stijl van één knop waarmee alle ion-items tegelijk worden geopend, is niet meer mogelijk omdat show-delete en show-reorder niet langer worden ondersteund. De enige beschikbare optie is om ion-item-sliding als ion-item te hebben, wat ons de mogelijkheid geeft om elk item één voor één te schuiven om de verwijderknop te onthullen.

Dat is niet wat ik wilde. Ik wilde een knop die alle ion-items tegelijkertijd opent.

Na enige tijd hieraan te hebben besteed, kwam ik met een werkende oplossing en slaagde erin om het gewenste resultaat te bereiken met behulp van ionic 2, en ik ga het met u delen.

Hier is mijn oplossing:

In het .html-bestand:

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

en voor de lijst:

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

Voer in het .ts- bestand eerst uw invoer uit:

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

verwijs vervolgens naar het html-element door een ViewChild te verklaren:

@ViewChild(List) list: List;

Voeg ten slotte uw klassen toe om het werk af te handelen:

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

Dan de openingsklasse:

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

En de slotklasse:

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

}

Ik hoop dat het je daar ergens zal helpen.

Geniet en goede codering ...