Angular 15中表单脏值时刷新页面如何自定义弹窗并处理响应？

问题背景 #

当表单变为脏值后，用户通过F5或浏览器刷新按钮刷新页面时，需要展示确认弹窗，并根据用户选择执行对应逻辑：确认则发送HTTP请求，取消则保留当前状态。此前尝试的三种方案均无效：

• 使用@HostListener('window:beforeunload', ['$event'])：能触发浏览器默认确认窗，但无法获取用户响应结果以执行自定义逻辑
• 使用Angular路由的CanDeactivate：仅处理路由内部跳转，对浏览器刷新/关闭标签页无效
• 在beforeunload中调用confirm()：自定义弹窗会被浏览器安全策略拦截，无法生效

可行解决方案 #

由于浏览器的安全限制，beforeunload事件无法获取用户的确认/取消选择结果，也不允许自定义弹窗。我们可以通过组合监听beforeunload和unload事件来实现需求：

1. 触发浏览器默认确认弹窗 #

通过beforeunload事件触发浏览器自带的确认框，阻止页面直接刷新，让用户选择是否继续。

2. 在页面卸载时执行确认后的逻辑 #

用户确认刷新后，浏览器会触发unload事件，此时可以在这里执行HTTP请求等逻辑。推荐使用navigator.sendBeacon()，它能保证浏览器在后台完成请求发送，不受页面卸载的影响。

Angular组件代码示例 #

import { Component, HostListener, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-form-component',
  templateUrl: './form.component.html'
})
export class FormComponent {
  @ViewChild('form') form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      // 表单控件定义
      username: [''],
      email: ['']
    });
  }

  // 监听页面刷新/关闭前的事件，触发确认弹窗
  @HostListener('window:beforeunload', ['$event'])
  handleBeforeUnload(event: BeforeUnloadEvent) {
    if (this.form.dirty) {
      event.preventDefault();
      // 兼容不同浏览器的触发逻辑
      event.returnValue = '';
      return '';
    }
  }

  // 监听页面卸载事件，执行确认后的逻辑
  @HostListener('window:unload', ['$event'])
  handleUnload(event: Event) {
    if (this.form.dirty) {
      // 使用sendBeacon发送请求，确保请求能完成
      const formData = JSON.stringify(this.form.value);
      navigator.sendBeacon('/api/save-form-data', formData);
      
      // 这里可以添加其他确认后的同步逻辑
      // 注意：unload事件中避免复杂异步操作，浏览器可能会中断未完成的任务
    }
  }
}

关键说明 #

• 浏览器安全限制：beforeunload事件仅允许触发浏览器默认的确认弹窗，无法获取用户的选择结果，这是为了防止恶意网站劫持用户操作。
• navigator.sendBeacon()的优势：它是异步的，但浏览器会在页面卸载后继续在后台完成请求发送，比传统的fetch或XMLHttpRequest更可靠，不会阻塞页面卸载流程。
• 取消操作的处理：用户选择取消刷新时，页面不会卸载，unload事件也不会触发，此时表单状态保持不变，无需额外处理。

内容的提问来源于stack exchange，提问作者Влад