角垫桌消除纹波

Question

我有一个角度材质表，上面有一个带有 matRipple 效果的可点击行。在表格中，我有一个按钮作为其中一行。单击按钮时，它会发出一个事件，到目前为止，我已经停止了事件传播，这可以很好地防止两个元素检测到单击事件。有没有办法仅在单击按钮时暂时消除父行的涟漪效应？

Answer 1

纹波纹使用mousedown和mouseup事件，您可以在两个事件中禁用或打开父级的涟漪：

  <div
    class="example-ripple-container mat-elevation-z4"
    matRipple
    [matRippleDisabled]="disabled"
  >
    <button (mousedown)="disabled=true" (mouseup)="disabled=false" mat-button>button</button>
  </div>

Answer 2

只需使用stopPropagation方法停止按钮的鼠标按下事件的进一步传播，如下所示：

<button (mousedown)="$event.stopPropagation()">