Angular中beforeunload事件Event已废弃，未保存变更阻止导航遇异常

1. 修复window:beforeunload的废弃问题 #

现代浏览器已废弃通过操作Event对象自定义页面关闭/刷新提示的方式，只需直接返回布尔值即可触发浏览器默认的未保存变更提示。调整你的@HostListener方法：

@HostListener('window:beforeunload')
handleBeforeUnload(): boolean {
  // 仅当存在未保存变更且不属于例外场景时，返回true触发提示
  return this.hasUnsavedChanges() && !this.allowNavigation;
}

2. 处理例外场景（登出/布局切换） #

在组件中新增一个状态变量标记是否允许导航，点击例外按钮时将其设为true：

// 组件内状态变量
allowNavigation = false;

// 登出按钮点击事件
handleLogout() {
  this.allowNavigation = true;
  // 执行你的登出逻辑（比如调用接口、跳转登录页）
}

// 布局切换按钮点击事件
handleLayoutToggle() {
  this.allowNavigation = true;
  // 执行布局切换逻辑
  // 若切换后仍停留在当前页面，操作完成后重置状态
  setTimeout(() => {
    this.allowNavigation = false;
  }, 0);
}

3. 拦截路由导航（仅靠beforeunload无法处理路由跳转） #

实现Angular的CanDeactivate守卫，拦截组件内的路由跳转：

第一步：定义守卫接口和守卫类

import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';

// 定义组件需实现的接口
export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

// 守卫实现类
export class UnsavedChangesGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate): Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

第二步：在组件中实现canDeactivate方法

canDeactivate(): Observable<boolean> | boolean {
  if (this.hasUnsavedChanges() && !this.allowNavigation) {
    // 弹出确认提示，让用户选择是否离开
    return confirm('你有未保存的变更，确定要离开当前页面吗？');
  }
  return true;
}

第三步：在路由配置中注册守卫

import { UnsavedChangesGuard } from './path-to-guard';

const routes: Routes = [
  {
    path: 'your-component-path',
    component: YourComponent,
    canDeactivate: [UnsavedChangesGuard]
  }
];

关键说明 #

• hasUnsavedChanges()是你自己实现的判断未保存变更的逻辑，替换成你的实际代码即可。
• 例外场景中设置allowNavigation = true后，无论是路由跳转还是页面刷新/关闭，都会允许用户操作。

内容的提问来源于stack exchange，提问作者Rajat Nigam