html - ion-Checkbox only on box clickable

Question

我想分开我的 <ion-checkbox>来自 <ion-label> .所以主要的问题是，如果你点击标签，我必须显示额外的信息，但你不应该激活复选框。只有在单击“复选框图标/复选框方 block ”时才应激活该复选框。

<div>
  <ion-list>
    <ion-item *ngFor="let list of list">
    <ion-label (click)="showAdditionalInformations()">{{list.item.free_text}}</ion-label>
    <ion-checkbox *ngIf="list.item.checkbox==true"></ion-checkbox>
  </ion-item></ion-list>
</div>

有人可以帮助我吗？

Answer 1

这不适用于 Ionic 4，因为 Shadow Dom 创建了一个覆盖标签元素并捕获点击事件的按钮元素。Ionic 4 的解决方法是用跨度包裹 ion-checkbox，并使其相对。这样，Shadow Dom 中的按钮将只适合这个新的跨度，让标签自由分配自定义点击事件。

<span class="checkbox-container">
    <ion-checkbox slot="end" formControlName="accept"></ion-checkbox>
</span>

.checkbox-container {
   position: relative;      
}