Angular模态对话框实现confirm功能：点击后返回结果并继续执行

要让你的确认对话框实现原生confirm的阻塞效果（等待用户点击Yes/No后再执行后续代码），核心是让showDialog返回的Promise延迟resolve，直到用户触发点击事件。以下是具体修改方案：

修改ConfirmBoxComponent组件代码 #

TypeScript部分 #

import { Component, OnInit } from '@angular/core';
import { SharedobjectService } from 'src/app/service/sharedobject.service';

@Component({
  selector: 'app-confirm-box',
  templateUrl: './confirm-box.component.html',
  styleUrls: ['./confirm-box.component.scss']
})
export class ConfirmBoxComponent implements OnInit {

  display: boolean = false;
  messageText: string;
  result: boolean;
  // 保存Promise的resolve回调，用于用户交互后触发
  private resolveFn: (value: boolean) => void;

  constructor(private sharedObject: SharedobjectService) { 
    this.sharedObject.confirmBox = this;
  }

  showDialog(msg: string): Promise<boolean> {
    return new Promise((resolve) => {
      // 保存resolve函数，等待用户点击后调用
      this.resolveFn = resolve;
      this.messageText = msg;
      this.display = true;
      // 不再立即resolve，等待用户操作
    });
  }

  public onApprove() {
    this.result = true;
    this.display = false;
    // 触发Promise的resolve，返回true
    this.resolveFn(true);
    // 清空回调，避免内存泄漏
    this.resolveFn = null;
  }

  public onCancel() {
    this.result = false;
    this.display = false;
    // 触发Promise的resolve，返回false
    this.resolveFn(false);
    this.resolveFn = null;
  }

  ngOnInit() {
    console.log('ConfirmBoxComponent ngOnInit');
  }

}

HTML模板部分 #

<p-dialog modal='true' [(visible)]="display">
    <div class="p-grid p-dir-col">
        <label>{{ messageText }}</label>
        <br/>
        <div class="p-grid p-align-center p-nogutter">
            <button class="btn btn--primary col1" (click)="onApprove()">Yes</button>
            <button class="btn btn--primary col1" ngbAutofocus (click)="onCancel()">No</button>
        </div>
    </div>
</p-dialog>

关键改动说明 #

• 保存resolve回调：在showDialog创建Promise时，把resolve函数赋值给组件的resolveFn变量，而非立即调用resolve。
• 用户交互触发resolve：当用户点击Yes/No按钮时，先关闭对话框（设置display=false），再调用resolveFn并传入对应的布尔值，此时父组件的await会收到返回值，继续执行后续代码。
• 清空回调：每次调用完resolveFn后清空变量，避免重复触发或内存泄漏。

父组件调用验证 #

你的父组件调用逻辑无需修改，await会自动等待Promise完成：

// Do something ...
let resp: boolean = await this.sharedObject.confirmBox.showDialog('Hello');
// Continue ... 
if (resp === true) {
  // 用户点击了Yes，执行对应逻辑
} else {
  // 用户点击了No，执行对应逻辑
}

这样就能实现和原生confirm完全一致的阻塞效果——只有用户点击按钮后，后续代码才会继续执行。

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