我们可以在用户单击 Angular11 中的浏览器选项卡关闭确认单击取消/继续后执行操作吗？答案

【问题标题】：Can we perform action after user clicks cancel / continue on browser tab close confirmation in Angular11?我们可以在用户单击 Angular11 中的浏览器选项卡关闭确认单击取消/继续后执行操作吗？
【发布时间】：2021-10-25 16:30:00
【问题描述】：

我正在开发一个 Angular 11 项目，我使用以下代码实现了浏览器关闭确认对话框

@HostListener('window:beforeunload', ['$event'])
  onWindowClose(event: any): void {
    event.preventDefault();
    event.returnValue = true;
    return;
  }

每当用户尝试使用 URL 关闭或重定向时，我都会看到确认对话框

现在我有一个场景，我想根据用户对Leave 或Cancel 的点击执行不同的操作。有可能这样做吗？如果是，请告知如何实现这一目标。

【问题讨论】：

标签： angular browser angular11

【解决方案1】：

如何打开对话框？

如果您使用的是 window.confirm，则应该有一个返回布尔值来指示您单击了哪个按钮。

if (window.confirm("Do you really want to leave?")) {
  ...
} else {
  ...
}

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/confirm

【讨论】：

上述代码本身打开对话框，它监听WindowClose事件并打开对话框。
如何打开确认对话框？
在上面的代码event.returnValue = true; return;这两行告诉浏览器在关闭/重定向之前确认，不需要手动打开任何弹出窗口。