角。 關閉圖像裁剪器后，手風琴不會從另一個面板打開相同的圖像

Question

在手風琴內容中有上傳裁剪圖像的功能。 當我單擊圖標上傳時，它會打開用於圖像裁剪的模態，但是當我第二次關閉模態而不是“完成”時，它不會打開模態。

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 = '';
  }

堆棧閃電戰

Answer 1

您有兩種選擇來解決此問題。

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 演示

Answer 2

每次 ViewChild 返回第一個面板，因為 Angular 會找到該面板的第一個實例。 將 ViewChild 更改為 ViewChildren 以獲取所有面板。

@ViewChildren('imageInput') imageInput: any;

並且還在 onThumbnailCropperCloseClick() 中為所有面板設置空值

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