时间戳

首页 > 解决方案 > 单击该div内的按钮时如何禁用该div上的matRipple？

angular - 单击该div内的按钮时如何禁用该div上的matRipple？

问题描述

我正在使用 angular 11 创建这个图像上传组件

我有一个放置区div，matRipple所以每当用户放置一个文件时，它都会显示涟漪效应。在那个 div 里面我有按钮可以左右旋转。当我单击这些按钮时，也会触发放置区 div 的涟漪效应。有没有办法禁用它？因此，如果用户单击该 div 中的按钮，该 div 的涟漪效应不会发生？我认为通过添加event.stopPropagation()到按钮事件处理程序它会停止它，但它没有。

这是我的组件：

<div class="container">
  <div class="box" style="width: 264px; height: 264px;transition: transform 0.5s" [style.transform]="'rotate(' + this.imageRotation + 'deg)'">
    <img style="max-width: 264px; max-height: 264px; position: relative" [src]="selectedFile?.src ? selectedFile?.src : previewImageUrl ? previewImageUrl : null" /></div>
  <div class="box stack-top">
    <div class="dropzone" comTuxinUpArea (fileDropped)="processFile($event)" matRipple>
      <input type="file" id="fileDropRef" accept="image/jpeg,image/png,image/webp" (change)="processFile($event.target)" />
      <h3 i18n>drag and drop file here</h3>
      <h3 i18n>or</h3>
      <label for="fileDropRef" i18n>Browse for file</label>
      <div fxLayout="row" fxLayoutAlign="center center" id="rotate-div">
        <button mat-icon-button *ngIf="this.selectedFile" (click)="rotateLeft()"><mat-icon>rotate_left</mat-icon></button>
        <button mat-icon-button *ngIf="this.selectedFile" (click)="rotateRight()"><mat-icon>rotate_right</mat-icon></button>
      </div>
    </div>
  </div>

旋转按钮事件处理程序：

 rotateLeft() {
    this.imageRotation+=90;
  }

  rotateRight() {
    this.imageRotation-=90;
  }

标签： angularangular-materialstoppropagation

解决方案

[matRippleDisabled]="someVariable" 在你的 div 上使用。在您的按钮上，当您将鼠标悬停在按钮上时，您可以在 true 和 false 之间更改 someVariable 的值。

在您的按钮上使用 : (mouseenter)="someVariable=true" (mouseleave)="someVariable=false"启用或禁用外部 div 的波纹效果。

推荐阅读