基于Payload长度的下载按钮条件触发逻辑实现问询

问题背景 #

固定位置的Download按钮通过Post API实现下载，需满足两个核心规则：

• 当Payload长度大于0时，直接触发文件下载；
• 当Payload长度等于0时，先打开模态框，用户点击「继续下载」后再触发下载。

原代码逻辑存在错误：当Payload长度为0时会直接发起下载请求，未按要求先弹出模态框等待用户确认。

修正后的代码 #

按钮与模态框HTML代码 #

<button
     id="download-data"
      title="download"
      (click)="exportToZip(false)"
      role="button">
        download
</button>

<ibm-modal [open]="isExportModalButtonEnabled">
        <ibm-modal-header (closeSelect)="closeModal()">
          <h4 id="modal-header" ibmModalHeaderHeading>
            {{ 'Download' | translate }}
          </h4>
        </ibm-modal-header>
        <ibm-modal-footer id="modal-footer">
          <ng-container>
            <button class="cancel-button" (click)="closeModal()">
              {{ 'cancelButton' | translate }}
            </button>
            <button (click)="exportToZip(true)">
              {{ continueToDownload | translate }}
            </button>
          </ng-container>
        </ibm-modal-footer>
      </ibm-modal>

TypeScript逻辑代码 #

exportToZip(shouldProceedWithDownload: boolean) {
  const { technicalServiceFilterList } = this.getQueryParams();
  const exportParams = {
    technicalServiceFilterList,
    period: "latest",
  };
  const payload = technicalServiceFilterList.length ? technicalServiceFilterList.split(',') : [];

  // Payload为空且未触发模态框确认：仅打开模态框
  if (payload.length === 0 && !shouldProceedWithDownload) {
    this.isExportModalButtonEnabled = true;
    return;
  }

  // 以下两种情况直接执行下载：
  // 1. Payload长度大于0
  // 2. 用户已在模态框点击继续下载
  this.isExportModalButtonEnabled = false;
  this.ManagementService.downloadDetails(exportParams, payload).subscribe((response) => {
    this.downloadZip(response, selectedRow);
  });
}

closeModal() {
  this.isExportModalButtonEnabled = false;
}

逻辑说明 #

• 点击页面主下载按钮时传入false：
  • 若Payload为空，仅打开模态框等待用户确认；
  • 若Payload有内容，直接发起下载请求。
• 用户点击模态框「继续下载」按钮时传入true：
  • 直接触发下载请求，同时关闭模态框。

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