亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

角材質復選框:選中標簽中的鏈接時防止出現波紋

角材質復選框:選中標簽中的鏈接時防止出現波紋

小唯快跑啊 2023-07-06 14:35:22
我有一個 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();  }它的工作原理是對話框打開并且復選框未被選中,這正是我想要的。然而,無論如何,漣漪都會在復選框上觸發。有沒有辦法在我單擊文本時防止出現波紋,但在單擊復選框時使其起作用?我認為我所做的已經足夠了,因為它確實阻止了點擊到達復選框并選中它。
查看完整描述

2 回答

?
弒天下

TA貢獻1818條經驗 獲得超8個贊

看起來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;

  }


查看完整回答
反對 回復 2023-07-06
?
蕪湖不蕪

TA貢獻1796條經驗 獲得超7個贊

添加

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

到源代碼中的app.component,它仍然具有“懸?!毙Ч?,可以通過CSS禁用它。

修復方法是:

.mat-ripple { display: none; }

.mat-checkbox-ripple僅用于復選框


查看完整回答
反對 回復 2023-07-06
  • 2 回答
  • 0 關注
  • 133 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號