单击标签时避免单击复选框

Question

我有一个复选框和标签，就像这样。这里的问题是，由于整个部分都作为一个单元工作，因此我无法单击href。即，当我单击标签时，它将触发该复选框。那么，如何区分或避免这种行为呢？即我需要点击超链接。

  <ion-item>
    <ion-label class="long-text">I accept the Terms & Conditions and the Privacy Policy found
      <a href="#" (click)="goToPrivacyPolicy()">here</a></ion-label>
    <ion-checkbox [(ngModel)]="terms" slot="start"></ion-checkbox>
  </ion-item>

UI

尝试过：但是还没有运气吗？

.ts

  goToPrivacyPolicy(event) {
    event.stopPropagation(); //or event.preventDefault()
    this.iab.create(environment.privacyPolicy);
  }

html

<ion-item>
    <ion-label class="long-text">I accept the Terms & Conditions and the Privacy Policy found
      <a href="#" (click)="goToPrivacyPolicy($event)">here</a></ion-label>
    <ion-checkbox [(ngModel)]="terms" slot="start"></ion-checkbox>
  </ion-item>

Answer 1

检查 WORKING STACKBLITZ

<ion-item text-wrap>
 <ion-row>
    <ion-col col-2 no-padding no-margin>
      <ion-item no-padding no-margin no-lines>
        <ion-checkbox [(ngModel)]="agreed"></ion-checkbox>
      </ion-item>
    </ion-col>
    <ion-col col-10 no-padding no-margin>
      <ion-item no-padding no-margin no-lines>
        Agree to <a target="_blank" href="http://www.terms-of-service.com">Terms of Service</a> and <a target="_blank" href="http://www.privacy-policy.com">Privacy Policy</a>. found  <a href="#" (click)="goToPrivacyPolicy($event)">here</a>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-item>