Angular 12中禁用浏览器刷新按钮的问题求助

方案一：利用原生beforeunload事件拦截全局页面卸载操作 #

这个方法可以拦截所有导致页面卸载的行为（包括刷新、关闭标签页、跳转外部链接等），在Angular 12中可直接在根组件中实现：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    window.addEventListener('beforeunload', (event) => {
      // 自定义提示文本，部分浏览器会强制显示默认提示，自定义内容可能不生效
      event.returnValue = '你确定要离开当前页面吗？';
      return event.returnValue;
    });
  }
}

方案二：通过路由守卫拦截单页应用内的路由刷新行为 #

如果仅需针对单页应用内的页面切换/刷新操作拦截，可使用CanDeactivate路由守卫：

1. 创建守卫服务

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

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

@Injectable({ providedIn: 'root' })
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate): Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

2. 在目标组件中实现拦截逻辑

import { Component } from '@angular/core';

@Component({
  selector: 'app-target',
  templateUrl: './target.component.html',
  styleUrls: ['./target.component.css']
})
export class TargetComponent {
  canDeactivate(): boolean {
    // 根据业务需求判断是否允许离开，比如检查表单状态
    return window.confirm('你确定要刷新或离开当前页面吗？');
  }
}

3. 在路由配置中绑定守卫

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TargetComponent } from './target/target.component';
import { CanDeactivateGuard } from './can-deactivate.guard';

const routes: Routes = [
  {
    path: 'target',
    component: TargetComponent,
    canDeactivate: [CanDeactivateGuard]
  }
];

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

注意：浏览器的刷新按钮属于原生系统控件，无法直接禁用，上述方案仅能拦截刷新行为并引导用户确认操作，无法完全阻止用户触发刷新。

内容的提问来源于stack exchange，提问作者Sonal Shinde