角度材料复选框：检查标签中的链接时防止波纹答案

【问题标题】：angular material checkbox: prevent ripple when link in label is checked角度材料复选框：检查标签中的链接时防止波纹
【发布时间】：2020-11-03 12:01:39
【问题描述】：

我有一个 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();
  }

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

但是，无论如何都会在复选框上触发涟漪。有没有办法在我点击我的文本时防止涟漪，但在点击复选框时它可以工作？

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

【问题讨论】：

在打开对话框之前您是否尝试过只做event.preventDefault(); 和event.stopPropagation(); ？
为 mat-checkbox 设置 [disableRipple]="true" 可能是最简单的。你会失去正常检查的涟漪，但似乎要付出很小的代价才能避免更复杂的事情。

标签： javascript angular angular-material

【解决方案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;
  }

【讨论】：

【解决方案2】：

添加

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

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

解决办法是：

.mat-ripple { display: none; }

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

【讨论】：