角材质复选框：选中标签中的链接时防止出现波纹

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）。&nbsp; openUspsPrivacyAgreement(event: MouseEvent) {&nbsp; &nbsp; this.isRippleDisabled = true; // set to false when dialog close&nbsp; &nbsp; this.dialogService.open(DialogUspsPrivacyAgreementComponent);&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; event.stopPropagation();&nbsp; &nbsp; return false;&nbsp; }

Answer 2

添加<mat-checkbox>Checked&nbsp;1</mat-checkbox>到源代码中的app.component，它仍然具有“悬停”效果，可以通过CSS禁用它。修复方法是：.mat-ripple&nbsp;{&nbsp;display:&nbsp;none;&nbsp;}或.mat-checkbox-ripple仅用于复选框