单击离子项 Ionic 4 时是否有办法不触发复选框？

当我单击离子项目的标签时，会触发复选框。 我想找到一种方法来防止这种情况发生，因为我想在单击标签时触发另一个功能。

我找到了 Ionic 3 的答案：https://forum.ionicframework.com/t/solved-can-i-disable-a-checkbox-from-activating-when-clicking-on-a-label/95120 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>

我想要有两种行为： - 单击复选框时仅触发该复选框。 - 单击标签或图标时，打开一个模式来编辑我的文档。

我刚刚遇到了类似的问题，并通过使用 ion-item 的插槽在 ionic 4 中找到了一个很好的解决方案。

<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单击复选框时不会触发。
• The start默认情况下，插槽没有下边框，因此必须通过添加来设置lines="full" to the ion-item;

请注意，主槽仍然以较大的宽度呈现。这可能会导致一些隐藏内容。在这种情况下，可以通过像这样的 css 调整来解决这个问题。

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