Есть ли способ не запускать флажок при нажатии на ионный элемент Ionic 4?

Question

Когда я нажимаю на ярлык ионного элемента, активируется флажок. Я хочу найти способ предотвратить это, так как я хочу вызвать другую функцию при нажатии на метку.

Я нашел этот ответ для Ionic 3: https://forum.ionicframework.com/t/solved-can-i-disable-a-checkbox-from-activating-when-clicking-on-a-label/95120 Тем не менее, он не работает для Ionic 4.

<ion-item>
    <ion-icon [name]="setIconDoc(item.document.documentType)" color="primary" (click)="editDocument(item.document)"></ion-icon>
        <ion-label padding-start color="none" (click)="editDocument(item.document)"> {{ item.document.customer.name }}
        </ion-label>
        <ion-checkbox slot="end" color="success" [(ngModel)]="item.isChecked"> 
   </ion-checkbox>
</ion-item>

Я хотел бы иметь два поведения: - При нажатии на флажок флажок просто флажок. - При нажатии на ярлык или значок откройте модальное окно для редактирования моего документа.

Answer 1

У меня просто была похожая проблема, и я нашел хорошее решение для нее в ionic 4, используя слоты ion-item.

<ion-item lines="full">
  <ion-icon slot="start" name="at" (click)="iconClicked()"></ion-icon>

  <ion-label slot="start" (click)="labelClicked()">
    This is a separately clickable label
  </ion-label>
  <ion-checkbox slot="end"></ion-checkbox>
</ion-item>

Объяснение

• Элементы в слоте start ion-item не запускаются при установке флажка.
• Слот start по умолчанию не имеет нижней границы, поэтому его необходимо установить, добавив lines="full" к ion-item;

Имейте в виду, что основной слот по-прежнему отображается с большой шириной. Это может привести к некоторому скрытому контенту. В этом случае это можно исправить с помощью CSS-твика, подобного этому.

ion-item ion-label {
  overflow: visible;
}