Angular：不使用确认框，在浏览器刷新等场景显示自定义模态框阻止刷新

针对表单未保存提示在路由场景正常，但浏览器刷新、回退、手动改URL时失效的问题，以下是分场景的具体实现方案：

一、处理页面刷新与外部导航（页面卸载） #

浏览器的beforeunload事件默认限制只能使用系统提示框，可通过以下逻辑绕开，显示自定义Bootstrap模态框：

1. 在表单组件中监听beforeunload事件，配合标志位控制模态框触发：

import { Component, HostListener, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html'
})
export class FormComponent implements OnInit {
  form: FormGroup;
  isUnsaved = false;
  private allowUnload = false;

  constructor(private fb: FormBuilder, private modalService: NgbModal) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      // 表单控件定义
    });

    // 监听表单变化，标记未保存状态
    this.form.valueChanges.subscribe(() => {
      this.isUnsaved = true;
    });
  }

  @HostListener('window:beforeunload', ['$event'])
  handleBeforeUnload(event: Event) {
    if (this.isUnsaved && !this.allowUnload) {
      event.preventDefault();
      event.returnValue = ''; // 兼容部分浏览器的默认提示触发逻辑
      this.showUnsavedModal();
    }
  }

  private showUnsavedModal() {
    const modalRef = this.modalService.open(UnsavedChangesModalComponent);
    modalRef.result.then(
      (action) => {
        if (action === 'confirm') {
          this.allowUnload = true;
          window.location.reload(); // 用户确认后手动执行刷新
        }
      },
      () => {
        // 用户取消或关闭模态框，不执行卸载
      }
    );
  }
}

核心逻辑：用allowUnload标志位避免重复触发模态框，用户确认后手动触发刷新/卸载动作。

二、处理浏览器返回按钮 #

监听浏览器popstate事件，拦截返回动作并显示模态框：

import { Location } from '@angular/common';

// 在组件构造函数中注入Location
constructor(private fb: FormBuilder, private modalService: NgbModal, private location: Location) {}

private popStateHandler: (event: PopStateEvent) => void;

ngOnInit(): void {
  // ... 表单初始化与监听代码

  this.popStateHandler = (event) => {
    if (this.isUnsaved) {
      event.preventDefault();
      this.showUnsavedModal().then((action) => {
        if (action === 'confirm') {
          this.location.back(); // 确认后执行返回
        } else {
          // 取消返回，手动添加历史记录恢复当前状态
          history.pushState(null, '', window.location.href);
        }
      });
    }
  };
  window.addEventListener('popstate', this.popStateHandler);
}

ngOnDestroy(): void {
  window.removeEventListener('popstate', this.popStateHandler);
}

// 改造模态框方法为异步返回结果
private async showUnsavedModal(): Promise<'confirm' | 'cancel'> {
  const modalRef = this.modalService.open(UnsavedChangesModalComponent);
  try {
    const result = await modalRef.result;
    return result === 'confirm' ? 'confirm' : 'cancel';
  } catch {
    return 'cancel';
  }
}

注意：用户取消返回后，需用history.pushState添加当前页面的历史记录，避免再次点击返回按钮直接跳过当前页。

三、处理手动修改内部URL场景 #

通过Angular的CanDeactivate路由守卫拦截内部路由导航，实现不刷新页面只显示模态框：

1. 创建守卫服务：

import { CanDeactivate } from '@angular/router';
import { FormComponent } from './form.component';
import { Injectable } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Injectable({ providedIn: 'root' })
export class UnsavedChangesGuard implements CanDeactivate<FormComponent> {
  constructor(private modalService: NgbModal) {}

  async canDeactivate(component: FormComponent): Promise<boolean> {
    if (!component.isUnsaved) return true;

    const modalRef = this.modalService.open(UnsavedChangesModalComponent);
    try {
      const result = await modalRef.result;
      return result === 'confirm';
    } catch {
      return false;
    }
  }
}

2. 在路由配置中添加守卫：

import { Routes, RouterModule } from '@angular/router';
import { FormComponent } from './form.component';
import { UnsavedChangesGuard } from './unsaved-changes.guard';

const routes: Routes = [
  {
    path: 'form',
    component: FormComponent,
    canDeactivate: [UnsavedChangesGuard]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class FormRoutingModule {}

这样，无论用户是通过路由链接还是手动修改内部URL回车，都会触发守卫，显示自定义模态框，用户确认后才会导航，取消则保持当前页面不刷新。

关键注意事项 #

• 自定义模态框需使用Bootstrap（或ng-bootstrap等封装库）实现，确保样式与交互符合需求
• 所有事件监听需在组件销毁时移除，避免内存泄漏
• 标志位（如allowUnload）的状态需在表单保存后重置，避免误触发

内容的提问来源于stack exchange，提问作者Rahul Krishnakumar