如何在angular 4中执行退出确认？

我想知道如何实现退出确认组件，以便在页面刷新或离开选项卡、窗口或屏幕时执行退出确认方法，这样，如果用户单击

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/core'导入{Component，OnInit，Input，Output，HostListener}；
@组成部分({
选择器：“confirmonexit”，
templateUrl:“./exit.html时确认”
})
导出类ConfirmOnExitComponent{
@Input（）isDirty:布尔值；
public已确认：boolean=false；
@HostListener（'window:beforeunload'，['$event']）beforeUnloadHander（）{
如果（本文件编号）{
let msg:string='您确定要导航而不在屏幕上保存输入的数据吗？'
如果（确认（味精））{
this.isDirty=false；
this.isconfired=false；
}否则{
this.isDirty=true；
event.preventDefault（）；
}
}
}
}
已添加appModule-声明中的此组件
添加的html=

---

我不知道错在哪里。我无法执行此功能。有人能帮我吗？

您可以在路线上使用安全防护。这将在您尝试离开任何路线时立即执行。例如，您可以参考此

---

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

您可以在ng表单中添加指令，并在确认指令上放置属性，如下所示。我希望这对你有帮助

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

---

您可以使用CanDeactivateguard，它使我们能够决定是否真的要离开路线（例如，如果我们想防止用户在填写表单时丢失未保存的更改，并意外单击按钮取消流程）

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

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

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

---

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

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

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

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