Angular 9: отключить флажок метки (не поле)

Question

Мне это нужно для того, чтобы сделать кликабельным лишь часть ярлыка с флажком (Политика конфиденциальности). Это фрагмент:

    <div>
      <mat-checkbox required formControlName="privacyCheck" [checked]="false">
        <b style="color: crimson">*</b>Accetto la
        <i style="color: #770E0E" (click)="printDebug()">privacy policy</i>
        e i termini di condizione dell'utilizzo del servizio.
      </mat-checkbox>
    </div>

В настоящий момент, если я нажимаю на текст itali c («Политика конфиденциальности»), я получаю printDebug, но, конечно, флажок будет установлен «проверен» ".

Я пробовал несколько решений, используя CSS свойство pointer-events: none !important; на .mat-checkbox-layout .mat-checkbox-label span, .mat-checkbox-layout .mat-checkbox-label и т. Д.

---

Answer 1

Как насчет старого доброго stopPropagation()?

_{Я был слишком быстр с моим ответом}

Вам нужно сделать preventDefault(), потому что содержимое mat-checkbox будет помещено в <label>, и в браузере по умолчанию будет установлен флажок, если вы нажмете на прикрепленную метку.

<i style="color: #770E0E" (click)="printDebug($event)">privacy policy</i>

printDebug(event: MouseEvent) {
  event.preventDefault();
  // ...
}

Если вы используете волновой эффект из материала это все равно будет срабатывать. Если вы не хотите этого, вам нужно будет выполнить .stopPropagation() для mousedown:

<i style="color: #770E0E" (mousedown)="$event.stopPropagation()" 
                          (click)="printDebug($event)">privacy policy</i>

stackblitz