角度材质复选框:选中标签中的链接时防止波纹

Question

我有一个Angular (10) Material复选框，在标签中有一个链接，它有一个点击处理程序，可以打开一个带有参考信息的对话框：

 <mat-checkbox formControlName="certification">
          By checking this box, I certify that all shipment information provided is correct and I agree to adhere to the
          <span class="fake-link" (click)="openUspsPrivacyAgreement($event)"> USPS Privacy Act Statement </span> and all
          other country-specific requirements.
        </mat-checkbox>

我的点击处理程序是

  openUspsPrivacyAgreement(event: MouseEvent) {
    this.dialogService.open(DialogUspsPrivacyAgreementComponent);
    event.preventDefault();
    event.stopPropagation();
  }

它的工作原理是对话框打开并且复选框未被选中，这正是我想要的。

但是，涟漪无论如何都会在复选框上触发。有没有一种方法可以防止我点击文本时的连锁反应，但当我点击复选框时，它就会起作用？

我认为我所做的已经足够了，因为它确实阻止了点击到达复选框并选中它。

Answer 1

看起来mat-checkbox忽略了内部元素stopPropagation。因此，您可以创建一种变通方法，将动态变量isRippleDisabled作为布尔标志添加到复选框

<mat-checkbox formControlName="certification" [disableRipple]="isRippleDisabled">

并在模式打开时将其关闭(true)，并在模式关闭时恢复正常(false)。

  openUspsPrivacyAgreement(event: MouseEvent) {
    this.isRippleDisabled = true; // set to false when dialog close
    this.dialogService.open(DialogUspsPrivacyAgreementComponent);
    event.preventDefault();
    event.stopPropagation();
    return false;
  }

Answer 2

添加

<mat-checkbox>Checked 1</mat-checkbox>

对于源代码中的app.component，它仍然具有“悬停”效果，可以通过CSS将其禁用。

修复方法是：

.mat-ripple { display: none; }

或仅用于复选框的.mat-checkbox-ripple