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

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>

用户界面

试过这个：但还没有运气？

.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>