我正在使用 Angular 11 创建此图像上传组件
我有一个带有 matRipple
的放置区 div
,因此每当用户放置文件时,它都会显示波纹效果。在该 div 内,我有左右旋转的按钮。当我单击这些按钮时,也会触发放置区 div 的链式 react 。
有没有办法禁用它?那么如果用户单击该 div 中的按钮,该 div 的链式 react 不会发生吗?我认为通过将 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;
}
最佳答案
另一个解决方案有点棘手,也不那么花哨,它默认直接从模板禁用 matRipple 并手动处理父元素单击事件:
my-app.component.html
<div *ngFor="let item of items; index as i" matRipple [matRippleDisabled]="true" (click)="toggleView(i)">
...
<button mat-button (click)="$event.stopPropagation(); doYourStuff()"></button>
</div>
my-app.component.ts
@ViewChildren(MatRipple) public matRipples!:QueryList<MatRipple>;
public toggleView(i:number):void {
this.matRipples.get(i)!.launch({ centered: true });
}
它比 @rishabhsharma 的解决方案效果更好,因为即使在触摸屏(少鼠标,因此没有光标事件)设备上也能工作。
希望它对某人有帮助。
关于angular - 单击 div 内的按钮时如何禁用 div 上的 matRipple?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65747461/