Question

我有ion-item，其中包含ion-checkbox和ion-labels元素，并且在a中具有ion-label元素：

<ion-item class="userAgreement" text-wrap no-border no-lines>
  <ion-checkbox formControlName="agreementCheckbox"></ion-checkbox>
  <ion-label>I accept the terms of 
     <a (click)="GoToUserAgreementPage()" class="linkText">User 
     Agreement</a>
  </ion-label>
</ion-item>

复选框本身是可单击的，但是当我单击User agreement中的ion-label文本时，整个ion-item都会被单击，并且会影响复选框。我希望复选框仅在单击时才可单击，并且只能在a元素inside ion-label内的那部分文本上单击。

Answer 1

如果您查看Ionic docs，实际上就是带有包裹在离子项目中的标签的复选框的工作原理。

要获得所需的行为，请勿将复选框和标签包裹在离子项目中，而应重新创建离子项目的外观。因此，您可以使用display: flex或网格。

使用display: flex和一些内联样式的原始草稿看起来像这样：

<div style="align-items: center; display: flex">
    <ion-checkbox style="padding-right: 10px" formControlName="agreementCheckbox"></ion-checkbox>
        <ion-label>I accept the terms of
                <a (click)="GoToUserAgreementPage()" class="linkText">User Agreement</a>
        </ion-label>
</div>

Answer 2

尝试将ion-checkbox包装在另一个ion-item中。在我看来，父级ion-item不会将点击事件传播到子级ion-item内的任何控件。

单击子级ion-item将按预期方式切换该复选框。

<ion-item class="userAgreement" text-wrap no-border no-lines>

  <ion-item>

    <ion-checkbox formControlName="agreementCheckbox"></ion-checkbox>

  </ion-item>

  <ion-label>I accept the terms of 
    <a (click)="GoToUserAgreementPage()" class="linkText">User Agreement</a>
  </ion-label>
</ion-item>

带有复选框和“ a”元素的离子项目-单击“ a”元素会单击整个项目和复选框

2 个答案: