Блог

Главная - Вопросы по программированию - Избегать флажка, нажатого при нажатии на метку

Избегать флажка, нажатого при нажатии на метку

#html #angular #ionic-framework #ionic4

#HTML #угловой #ionic-framework #ionic4

Вопрос:

У меня есть флажок и ярлык, подобный этому. Проблема здесь в том, что я не могу щелкнуть href из-за того, что весь раздел работает как единое целое. т.е. Когда я нажимаю на ярлык, он устанавливает флажок. Итак, как я могу отделить или избежать этого поведения? т.е. Мне нужно щелкнуть гиперссылку.

   <ion-item>
    <ion-label class="long-text">I accept the Terms amp; 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 amp; 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>

Комментарии:

1. Попробуйте добавить position:relative в a элемент stackblitz.com/edit /…

Ответ №1:

ПРОВЕРЬТЕ РАБОЧИЙ 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>

Комментарии:

1. Никакой разницы. Такое же поведение, как и в моем сообщении.

2. Да, я знаю это поведение. На самом деле, это был случайный вариант использования. т. Е. Я разработал динамический список флажков, используя ion-grid , и у него нет такого поведения. Но текущая страница разработана с использованием <ion-item> . Поэтому потребуется время, чтобы повторить использование сетки. В любом случае, я нашел для этого хак. Я добавлю это позже. Спасибо и 1.

Метки: