Question

我们如何防止在Angular 5.x中关闭浏览器选项卡或浏览器窗口本身？

我尝试了另一篇文章（Prevent closing browser tab when form is dirty in Angular 2）中推荐的解决方案。不幸的是，它不适用于Angular 5.x。

以下解决方案部分有效：

@HostListener('window:beforeunload', ['$event'])
handleClose(event) {
    event.returnValue = false;

上述代码的作用是显示一个弹出窗口，询问“你想离开这个网站吗？”有两个按钮 - 离开，留下。

我尝试了'卸载'和'关闭'事件，而不是'beforeunload'。

预先谢谢！

Answer 1

也许有一个Angular 5问题或者我不知道的变化，但是你错过了＆＃39; $＆＃39;登录处理事件的函数。应该是这样的：

@HostListener('window:beforeunload', ['$event'])
handleClose($event) {
    $event.returnValue = false;
}

编辑：我无法发表评论，这就是为什么我将此作为回答。

Answer 2

可以同时使用 RouteGuard 和纯 JavaScript 代码。

组件：

profileForm = this.fb.group({
  ClientName: ['', [Validators.required]]
});

@HostListener('window:beforeunload', ['$event']) beforeUnloadHander(event: any) {
     // alert();
     debugger
     var isFormDirty = document.getElementById('profileformStatus').innerText;
     console.log(isFormDirty);
     if(isFormDirty == 'true'){
       return false;
     }
     else{
       return true;
     }
   }

组件HTML：

<div id="profileformStatus">{{profileForm.dirty ? true:false}}</div>

您的组件保护服务文件（可选）：

import { CanDeactivate } from "@angular/router";
import { Injectable } from "@angular/core";
import { YourComponent } from "./projects/your-component";
@Injectable()

export class YourComponentCanDeactivateGuardService
    implements CanDeactivate<YourComponent> {

    canDeactivate(component: YourComponent): boolean {
        if (component.profileForm.dirty) {
            return confirm('Are you sure you want to discard your changes?');
        }
        return true;
    }
}

您的模块：添加“守卫者”（可选）

@NgModule({
    providers: [YourComponentCanDeactivateGuardService]
})

最后

更新您的路由模块（可选）：

const routes: Routes = [
    {
        path: 'detail/:id',
        component: YourComponent,
        canDeactivate: [YourComponentCanDeactivateGuardService]
    }
];

完成。现在，这将同时防止重新加载/向后导航。

防止在Angular 5.x中关闭浏览器选项卡/窗口

2 个答案: