如何在角度 4 中实现退出确认？答案

【问题标题】：how to implement confirm on exit in angular 4?如何在角度 4 中实现退出确认？
【发布时间】：2017-12-07 10:15:14
【问题描述】：

我想知道如何实现退出时确认组件，以便在页面刷新或离开选项卡或窗口或屏幕时我可以执行退出时确认方法，这样如果用户点击OK，他就会离开屏幕，然后点击NO，他会留在同一个屏幕上吗？

我在这里使用的代码是：

import { Component, OnInit, Input, Output, HostListener } from '@angular/core';
@Component({
    selector: 'confirmonexit',
    templateUrl: './confirm-on-exit.html' 
})
export class ConfirmOnExitComponent {
    @Input() isDirty: boolean;
    public isConfirmed: boolean = false;
    @HostListener('window:beforeunload',['$event']) beforeUnloadHander() {
        if (this.isDirty) {
            let msg: string = 'Are you sure you want to navigate without saving the entered data on the screen ? '
            if (confirm(msg)) {
                this.isDirty = false;
                this.isConfirmed = false;           
            } else {
                this.isDirty = true;
                event.preventDefault();
            }
        }
    }
}

appModule added - this component in declarations
html added =  <confirmonexit [isDirty]="CreateEditForm.form.dirty"></confirmonexit>

我不知道错误在哪里。我无法执行此功能。谁能帮帮我？

【问题讨论】：

标签： angular angularjs-directive angularjs-scope angular2-forms angular4-forms

【解决方案1】：

您可以在路线上使用角度停用保护。一旦您尝试离开任何路线，这将立即执行。例如，您可以参考这个 https://scotch.io/courses/routing-angular-2-applications/candeactivate

所以，如果您使用的是表单，那么您可以将表单传递给守卫，然后检查表单状态。如果它是脏的，则意味着它已被更改，然后您可以向用户显示确认对话框

【讨论】：

我们不能用这个现有的代码吗？？我的意思是@HostListener('window:beforeunload',['$event'])。
有什么想法吗？？需要帮助。
您提到的方法仅在用户离开窗口时才有效，但如果用户导航到其他选项卡，该方法将不会执行，因为您正在处理单页应用程序，您只有一个窗口

【解决方案2】：

您可以在 ng-form 中添加指令并在确认指令上放置一个属性，如下所示。希望对你有帮助

<form name="FormName">
            <confirm-exit is-dirty="FormName.$dirty"></confirm-exit>
<form>

【讨论】：

【解决方案3】：

您可以使用 CanDeactivate 守卫，它使我们能够决定是否真的要离开路线（例如，如果我们想防止我们的用户在填写表单并意外单击按钮以取消该过程）。

CanDeactivate 守卫还可以访问活动组件的实例，因此我们可以实现一个 hasChanges() 来检查是否有更改并有条件地请求离开前的用户确认。在以下示例中，CanDeactivateComponent 实现了方法 hasChanges()，该方法返回一个布尔值，指示组件是否检测到任何更改（我们可以检查表单的脏状态比较它以前的模型和当前的模型）。 CanDeactivate 守卫的实现类似于 CanActivate 守卫的实现（我们可以创建一个函数，或者一个实现 CanDeactivate 接口的类）：

import { CanDeactivate } from '@angular/router';
import { CanDeactivateComponent } from './app/can-deactivate';

export class ConfirmDeactivateGuard implements CanDeactivate<CanDeactivateComponent> 
{
  canDeactivate(target: CanDeactivateComponent) 
  {
    if(target.hasChanges()){
      return window.confirm('Do you really want to cancel?');
    }
    return true;
  }
}

尽管这是一个非常简单的实现，但我们在前面的示例中没有看到一件事。 CanDeactivate 使用的是泛型，因此我们需要指定要停用的组件类型。

我们实现了一个方法 canDeactivate()，如果需要，Angular 的路由器会在内部调用该方法。

{ 
  path: '',
  component: SomeComponent,
  canDeactivate: [ConfirmDeactivateGuard]
}

最后，与 Angular 上的所有其他服务一样，需要相应地注册此守卫：

@NgModule({
  ...
  providers: [
    ...
    ConfirmDeactivateGuard
  ]
})
export class AppModule {}

我们可以有多个守卫来保护单个路由，这有助于我们实施复杂的用例，其中需要一系列不同的检查。

【讨论】：