ionic2
Problemumgehung für 'show-delete' in Missbilligung

Lösung

Ich entwickle eine mobile App mit Ionic 2 mit Angular 2.

Ich habe eine Liste mit Ionenlisten gefüllt. Ich möchte, dass diese Ionenelemente bei Bedarf gelöscht werden, wie hier auf der ionischen Website dargestellt.

Allerdings haben viele in ionischen 2 seit der ersten Version und der oben Stil einer Taste geändert all Ionen Elemente an einer Öffnung ist nicht mehr möglich , da die Show-löschen und Show-Neuordnungs werden nicht mehr unterstützt. Die einzige verfügbare Option ist das Ionenartikelgleiten als Ionenartikel. Dies gibt uns die Möglichkeit, jeden Artikel einzeln zu verschieben, um die Schaltfläche "Löschen" anzuzeigen.

Das wollte ich nicht. Ich wollte eine Schaltfläche, mit der alle Ionenelemente gleichzeitig geöffnet werden.

Nachdem ich einige Zeit damit verbracht hatte, habe ich eine funktionierende Lösung gefunden und mit ionic 2 das gewünschte Ergebnis erzielt. Ich werde es mit Ihnen teilen.

Hier ist meine Lösung:

In der .html-Datei:

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

und für die 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>

Führen Sie in der .ts- Datei zuerst Ihre Importe aus:

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

Verweisen Sie dann auf das HTML-Element, indem Sie ein ViewChild deklarieren:

@ViewChild(List) list: List;

Fügen Sie schließlich Ihre Klassen hinzu, um die Arbeit zu erledigen:

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

Dann der Eröffnungskurs:

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

Und die Abschlussklasse:

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

}

Ich hoffe, es wird einigen da draußen helfen.

Viel Spaß und gute Programmierung ...