Angular 如何实现点击保存按钮后才允许触发发送按钮功能

实现方案 #

你只需要新增一个保存状态标记，再分别修改保存、发送方法的逻辑即可，具体步骤如下：

1. 给组件新增状态属性 #

在你的组件类中新增一个布尔属性，用来记录offer是否已经成功保存：

// 组件类内新增，默认值为false（未保存）
isOfferSaved = false;

2. 修改saveOffer方法 #

只有当保存接口请求成功后，才把状态标记改为已保存：

saveOffer() {
  this._offerService.saveOffer(this.offer).subscribe(() => {
    this._offerService.getOfferDetail(this.offer.OfferId);
    // 新增：保存成功后更新状态
    this.isOfferSaved = true;
  });
}

3. 修改sendOfferSupplier方法 #

方法执行前先判断保存状态，未保存就弹出警告直接终止后续逻辑：

sendOfferSupplier() {
  // 新增：未保存时直接弹警告，不执行后续发送逻辑
  if (!this.isOfferSaved) {
    this._dialog.open(FuseConfirmDialogComponent, {
        disableClose: false
    }).componentInstance.confirmMessage = '请先保存offer后再发送';
    return;
  }

  // 原有发送逻辑保持不变
  this.confirmDialogRef = this._dialog.open(FuseConfirmDialogComponent, {
      disableClose: false
  });
  this.confirmDialogRef.componentInstance.confirmMessage = 'Do you want to send the offer?';
  this.confirmDialogRef.afterClosed().subscribe(result => {
      if (result) {
          this.offer.ApprovementInfo.Description = result;
          this._offerService.sendOfferSupplier(this.offer).subscribe(() => {
              this._offerService.getOfferDetail(this.offer.OfferId);
          });
      }
  });
}

可选优化（体验升级） #

你可以直接在模板中给发送按钮绑定禁用状态，用户未保存时按钮直接置灰不可点击，比点击后才弹提示更友好：

<!-- 示例为Angular模板语法，根据你使用的框架调整即可 -->
<button (click)="saveOffer()">保存Offer</button>
<button (click)="sendOfferSupplier()" [disabled]="!isOfferSaved">发送Offer</button>

注意事项 #

如果业务允许用户保存后再次修改offer内容，需要在offer内容变更的回调中把isOfferSaved重置为false，避免用户修改了未保存的内容还能直接发送。

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