角.关闭图像裁剪器后，不会在手风琴中从另一个面板打开相同的图像

Question

在accordion内容中有一个上传裁剪图像的功能。当我点击图标上传时，它打开了图像裁剪模式，但是当我关闭模式而不是"完成"时;对于相同的图像，第二次它不会打开模态。

Html输入

<label [for]="'image-input-' + i">
<span class="icon">
<i class="fa-solid fa-circle-plus" title="Upload new image"></i>
</span>
</label>
<input hidden #imageInput [id]="'image-input-' + i" type="file" accept="image/*"                               
(change)="onFileChange($event, promotion.promotion,'image')" />

收割机

<ng-template #ImageCropper let-modal>
<div class="p-2 cropper">
<h5 class="modal-title" id="exampleModalLabel">
Crop Selected
Image</h5>
<image-cropper [maintainAspectRatio]="true"
[aspectRatio]="6 / 3" format="png"
[imageChangedEvent]="imageCropperEventAttached"
(imageCropped)="ImageCropped($event)">
</image-cropper>
</div>
<div class="d-flex">
<button type="button"
class="btn btn-danger text-white px-3 py-2 m-2 ms-auto"
(click)="onThumbnailCropperCloseClick()">
Close
</button>
<button type="button"
class="btn btn-primary px-3 py-2 m-2"
(click)="processFile(imageInput, selectedData, 'image')">
Done
</button>
</div>
</ng-template>

手稿

onFileChange(event: any, pr: any, imgType: any): void {
this.imageCropperEventAttached = event;
this.popup = this.modalService.open(this.imageCropModel);
this.selectedData = pr;
}

我尝试添加@ViewChild('imageInput') imageInput: ElementRef;

并在关闭时设置值为null，但当我试图从另一个面板上传相同的图像时，它不能正常工作。.

onThumbnailCropperCloseClick() {
this.popup.close();
this.imageInput.nativeElement.value = '';
}

Stackblitz

Answer 1

每次ViewChild返回第一个面板，因为Angular会找到该面板的第一个实例。将ViewChild更改为ViewChildren以获取所有面板。

@ViewChildren('imageInput') imageInput: any;

并在onThumbnailCropperCloseClick()中为所有面板设置空值

onThumbnailCropperCloseClick() {
this.popup.close();
this.imageInput.forEach((panel: ElementRef) => panel.nativeElement.value = '');
}

Answer 2

您有两种选择来解决这个问题。

1. 通过禁用背景解散来强制用户采取操作。

2. 监听result事件触发，当用户在没有按下按钮的情况下关闭模式。

onFileChange(event: any, data): void {
console.log(event);
this.imageCropperEventAttached = event;
this.popup = this.modalService.open(this.imageCropModel);

// option 1: force user to take action, by disabling backdrop dismiss
// this.popup = this.modalService.open(this.imageCropModel, {backdrop: 'static', keyboard: false});
this.selectedData = data;
console.log(data);
// option 2: listen to result event emitted from modal dismiss
this.popup.result.then(() => {}, () => this.onThumbnailCropperCloseClick());
}

Stackblitz演示