ionic2
Обходной путь для 'show-delete' в неодобрение
Поиск…
Решение
Я разрабатываю мобильное приложение с использованием ионного 2 с угловым 2.
У меня есть ионные списки, заполненные ионом. Я хочу, чтобы у этих ионных предметов была возможность быть удалена, если это необходимо, как представлено здесь на ионном веб-сайте.
Однако многое изменилось в ионной версии 2, так как первая версия и вышеупомянутый стиль одной кнопки, открывающей все ионный элемент на одном, больше не возможны, так как show-delete и show-reorder больше не поддерживаются. Единственный доступный вариант - это использовать ионный предмет, как ионный элемент, который дает возможность скользить по каждому пункту по одному, чтобы открыть кнопку удаления.
Это не то, что я хотел. Я хотел, чтобы одна кнопка открывала все ионные предметы одновременно.
Потратив некоторое время на это, я придумал рабочее решение и смог добиться желаемого результата с помощью ionic 2, и я собираюсь поделиться им с вами.
Вот мое решение:
В файле .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>
и для списка:
<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>
В файле .ts сначала сделайте свой импорт:
import { ViewChild } from '@angular/core';
import { Item } from 'ionic-angular';
import { ItemSliding, List } from 'ionic-angular';
затем обратитесь к элементу html, объявив ViewChild:
@ViewChild(List) list: List;
Наконец, добавьте свои классы для обработки работы:
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;
}
}
Тогда класс открытия:
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)")
}
И закрывающий класс:
private closeSlide(itemSlide: ItemSliding) {
itemSlide.close();
itemSlide.setCssClass("active-sliding", false);
itemSlide.setCssClass("active-slide", false);
itemSlide.setCssClass("active-options-left", false);
}
Надеюсь, это поможет некоторым вам там.
Наслаждайтесь и хорошо кодируйте ...