Angular 12中如何替换页面离开/刷新时的默认浏览器警告弹窗为自定义Angular弹窗

嗨，这个需求我之前帮朋友处理过，其实得先给你提个醒：浏览器出于安全考虑，不允许直接替换beforeunload事件触发的默认警告弹窗，不过我们可以通过组合方案来实现近似效果，既拦截不必要的页面离开，又能用Angular自定义弹窗覆盖大部分场景，具体做法如下：

• 第一步：跟踪进程运行状态
  先在你需要拦截的组件（或者全局服务里）定义一个状态变量，用来标记是否有未完成的进程：

  // 组件内定义状态
  isProcessRunning = false;
  
  // 进程开始时标记状态
  startProcess() {
    this.isProcessRunning = true;
    // 这里放你的异步进程逻辑，比如接口请求、文件上传等
  }
  
  // 进程结束时重置状态
  finishProcess() {
    this.isProcessRunning = false;
  }
  

• 第二步：拦截单页应用内的路由跳转（完全自定义弹窗）
  用Angular的CanDeactivate守卫就能实现100%自定义弹窗，完美覆盖单页内的页面跳转场景：

  1. 创建守卫服务

     import { Injectable } from '@angular/core';
     import { CanDeactivate } from '@angular/router';
     import { Observable } from 'rxjs';
     import { MatDialog } from '@angular/material/dialog';
     // 引入你自己写的自定义弹窗组件
     import { CustomLeaveWarningDialogComponent } from './custom-leave-warning-dialog.component';
     
     @Injectable({ providedIn: 'root' })
     export class UnsavedProcessGuard implements CanDeactivate<any> {
       constructor(private dialog: MatDialog) {}
     
       canDeactivate(component: any): Observable<boolean> | boolean {
         // 检查当前组件是否有未完成进程
         if (component.isProcessRunning) {
           // 打开自定义弹窗
           const dialogRef = this.dialog.open(CustomLeaveWarningDialogComponent, {
             data: {
               title: '温馨提示',
               content: '你有未完成的进程，确定要离开当前页面吗？'
             }
           });
     
           // 返回弹窗关闭后的结果，true允许离开，false阻止离开
           return dialogRef.afterClosed();
         }
         // 没有进程时直接允许离开
         return true;
       }
     }
     

  2. 在路由配置中添加守卫
     找到你的路由配置文件（比如app-routing.module.ts），给需要拦截的路由绑定这个守卫：

     import { UnsavedProcessGuard } from './unsaved-process.guard';
     
     const routes: Routes = [
       {
         path: 'your-target-page',
         component: YourTargetComponent,
         canDeactivate: [UnsavedProcessGuard]
       }
     ];
     

• 第三步：处理页面刷新、关闭等跨页面操作（折中方案）
  这时候受限于浏览器安全机制，没法直接替换默认弹窗，但我们可以做两个实用优化：

  1. 只在有进程时触发浏览器默认提示
     在组件的ngOnInit中监听beforeunload事件：

     ngOnInit() {
       window.addEventListener('beforeunload', (event) => {
         if (this.isProcessRunning) {
           // 触发浏览器默认警告，这里的返回值文本大部分浏览器不会显示，仅用于触发提示
           event.preventDefault();
           event.returnValue = '';
         }
       });
     }
     

  2. 监听浏览器刷新按钮，提前显示自定义弹窗
     这个方法能覆盖用户点击刷新按钮的场景，作为补充方案：

     ngOnInit() {
       // 监听页面鼠标按下事件，匹配刷新按钮
       document.addEventListener('mousedown', (e) => {
         const target = e.target as HTMLElement;
         // 不同浏览器的刷新按钮选择器可能不同，这里是通用示例
         const isRefreshBtn = target.closest('[title*="刷新"]') || target.closest('[aria-label*="刷新"]');
         if (isRefreshBtn && this.isProcessRunning) {
           e.preventDefault();
           // 打开自定义弹窗
           const dialogRef = this.dialog.open(CustomLeaveWarningDialogComponent, {
             data: {
               title: '温馨提示',
               content: '你有未完成的进程，确定要刷新页面吗？'
             }
           });
     
           dialogRef.afterClosed().subscribe(confirm => {
             if (confirm) {
               // 用户确认后执行刷新
               window.location.reload();
             }
           });
         }
       });
     }
     

这样组合下来，既能在单页跳转时用自定义弹窗，又能在页面刷新关闭时做合理提示，基本能满足你的需求啦。

备注：内容来源于stack exchange，提问作者tu nguyen