Angular问题：关闭图片裁剪器后无法从手风琴其他面板打开同图

在Angular项目的手风琴组件中实现了上传裁剪图片功能：点击上传图标会打开图片裁剪模态框，但关闭模态框（未点击“Done”）后，第二次从手风琴的另一面板选择同一张图片时，模态框无法打开。

相关代码 #

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>

TypeScript 核心逻辑 #

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;，并在关闭模态框时清空input值，但从另一面板上传同一张图片时问题依旧：

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

解决方案 #

问题根源 #

1. 手风琴每个面板都有独立的imageInput元素，但@ViewChild仅会获取第一个匹配的元素，关闭时只清空了第一个input的值，其他面板的input值未被重置。
2. 当再次选择同一张图片时，未被清空的input因文件路径无变化，不会触发change事件，导致onFileChange不执行，模态框无法打开。

修复步骤 #

1. 使用@ViewChildren替代@ViewChild，获取所有imageInput元素：

import { ViewChildren, QueryList, ElementRef } from '@angular/core';

@ViewChildren('imageInput') imageInputs!: QueryList<ElementRef>;

2. 修改关闭模态框的方法，清空所有input元素的值：

onThumbnailCropperCloseClick() {
    this.popup.close();
    // 遍历所有input并清空值
    this.imageInputs.forEach(input => {
        input.nativeElement.value = '';
    });
}

3. （可选优化）在onFileChange中单独清空当前触发的input，避免影响其他面板：

onFileChange(event: any, pr: any, imgType: any): void {
    this.imageCropperEventAttached = event;
    this.popup = this.modalService.open(this.imageCropModel);
    this.selectedData = pr;
    // 提前清空当前触发的input，确保重复选图能触发change事件
    event.target.value = '';
}

处理后，无论从哪个面板选择同一张图片，都会触发change事件，模态框可正常打开。

内容的提问来源于stack exchange，提问作者bayandur