Angular 关闭/刷新/退出页面时警告提示未按预期生效问题求助

问题原因 #

beforeunload 是浏览器提供的同步事件，不会等待任何异步逻辑执行完成就会走完卸载流程。你代码中调用的Angular自定义弹窗属于异步操作，事件触发后不会等用户点击弹窗的确认/取消按钮，页面就会直接退出，这是核心问题。
另外现代浏览器出于安全限制，禁止在beforeunload事件中弹出自定义UI，只能使用浏览器原生的统一确认提示。

修复方案 #

方案1：使用浏览器原生提示（兼容所有浏览器关闭/刷新场景） #

首先删除你HTML代码中冗余的(window:beforeunload)绑定，你已经通过@HostListener监听了全局window的对应事件，不需要重复绑定。
然后修改TS代码如下：

@HostListener('window:beforeunload', ['$event'])
onWindowClose(event: BeforeUnloadEvent): void {
  // 触发浏览器原生离开提示
  event.preventDefault();
  // 自定义返回文案在大部分现代浏览器不会生效，只会显示浏览器默认提示
  event.returnValue = '你确定要离开当前页面吗？未保存的内容将会丢失';
  return event.returnValue;
}

方案2：搭配路由守卫实现应用内跳转的自定义提示 #

如果你还需要拦截用户在Angular应用内的路由跳转操作，这部分场景可以用CanDeactivate路由守卫实现自定义弹窗，代码如下：

1. 定义路由守卫

import { CanDeactivate, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { MatDialog } from '@angular/material/dialog';
import { FuseConfirmDialogComponent } from './fuse-confirm-dialog.component'; // 替换为你的组件实际路径

@Injectable({ providedIn: 'root' })
export class PageLeaveGuard implements CanDeactivate<unknown> {
  constructor(private dialog: MatDialog) {}

  canDeactivate(
    component: unknown,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ): Observable<boolean> {
    const confirmRef = this.dialog.open(FuseConfirmDialogComponent, { disableClose: false });
    confirmRef.componentInstance.confirmMessage = '你将退出当前页面，确定吗？';
    return confirmRef.afterClosed();
  }
}

2. 在路由配置中注册守卫

const routes: Routes = [
  {
    path: 'your-page-path', // 替换为你的页面路由
    component: YourPageComponent, // 替换为你的页面组件
    canDeactivate: [PageLeaveGuard]
  }
];

注意：路由守卫只能拦截应用内的路由跳转，无法拦截浏览器关闭、刷新、地址栏输入新地址跳转等浏览器级操作，这类场景只能用方案1的原生提示。

内容的提问来源于stack exchange，提问作者Hectic Platypus