如何在Angular 5中处理页面关闭Alert弹窗及用户操作判断？

在Angular 5里处理页面关闭时的确认弹窗，核心是利用浏览器的beforeunload事件，结合Angular的@HostListener装饰器来监听事件，同时通过unload事件判断用户最终的选择。下面一步步来实现：

一、基础实现：触发原生确认弹窗并判断用户选择 #

首先，我们需要在组件中导入HostListener，然后监听beforeunload和unload两个事件：

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  // 用来标记是否有未保存的修改，按需添加
  hasUnsavedChanges = true;

  // 监听页面关闭/刷新/导航前的事件
  @HostListener('window:beforeunload', ['$event'])
  handleBeforeUnload(event: BeforeUnloadEvent): string | void {
    if (this.hasUnsavedChanges) {
      // 触发浏览器原生确认弹窗，部分浏览器会自定义弹窗文本，但核心提示会保留
      event.returnValue = '您有未保存的更改，确定要离开当前页面吗？';
      // 兼容部分旧浏览器，需要返回字符串
      return '您有未保存的更改，确定要离开当前页面吗？';
    }
    // 没有未保存更改时，不触发弹窗
    delete event.returnValue;
  }

  // 监听页面卸载事件（仅当用户点击"离开"时触发）
  @HostListener('window:unload', ['$event'])
  handleUnload(event: Event): void {
    console.log('用户选择了离开页面');
    // 这里可以执行离开前的清理操作，比如同步临时数据等
  }
}

逻辑说明： #

• 当用户尝试关闭页面、刷新或跳转时，beforeunload事件会被触发。如果hasUnsavedChanges为true，我们设置event.returnValue并返回提示文本，浏览器就会弹出原生的确认弹窗。
• 如果用户点击取消，页面不会卸载，unload事件不会触发，用户留在当前页面。
• 如果用户点击离开，页面开始卸载，unload事件会触发，这时我们就能在handleUnload里处理离开相关的逻辑。

二、注意事项 #

1. 浏览器限制：出于安全和用户体验考虑，大部分浏览器不允许自定义弹窗的按钮文本，只能使用浏览器默认的"离开"和"取消"（或对应语言的文本），提示内容也可能被浏览器截断或修改。
2. 禁止异步操作：beforeunload事件中不能执行异步代码（比如HTTP请求），浏览器会直接忽略这些操作，确保页面能正常卸载。
3. 按需触发弹窗：不要无条件触发弹窗，最好通过hasUnsavedChanges这类状态判断，只有当用户有未保存修改时才弹出，避免打扰用户。

三、自定义弹窗的局限性（可选） #

如果你想使用自定义样式的弹窗，需要注意：浏览器不允许完全替代原生的beforeunload弹窗来阻止页面关闭。你可以尝试先阻止beforeunload的默认行为，再显示自定义模态框，但这种方法在部分浏览器中可能失效，而且处理逻辑更复杂：

@HostListener('window:beforeunload', ['$event'])
handleBeforeUnload(event: BeforeUnloadEvent): void {
  if (this.hasUnsavedChanges) {
    event.preventDefault();
    // 显示自定义模态框（假设你有封装好的模态框服务）
    this.customModalService.open({
      title: '确认离开',
      content: '您有未保存的更改，确定要离开吗？'
    }).subscribe((choice) => {
      if (choice === 'leave') {
        // 用户选择离开，允许页面卸载
        window.close(); // 或者让页面自然跳转/刷新
      }
      // 选择取消则无需额外操作，页面留在当前状态
    });
    // 兼容部分浏览器，需要设置returnValue
    event.returnValue = '';
  }
}

这种方式的兼容性不如原生弹窗，所以更推荐使用第一种原生弹窗的方案。

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