如何在角度 4 退出时实现确认? [英] how to implement confirm on exit in angular 4?

问题描述

我想知道如何实现退出时确认组件，以便在页面刷新或离开选项卡或窗口或屏幕时我可以执行退出时确认方法，以便如果用户单击<代码>确定他会离开屏幕，点击NO他会留在同一个屏幕上?

I want to know how can I implement a confirm-on-exit component so that on page refresh or leaving tab or window or screen I can execute a confirm on exit method, so that if user click OK he will leave the screen and on click on NO he will remain on same screen?

我在这里使用的代码是:

Code I am using here is:

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>

我不知道错误在哪里.我无法执行此功能.有人可以帮我吗?

I don't know where the mistake is. I am not able to execute this functionality. Could anyone help me out?

推荐答案

您可以使用 CanDeactivate 守卫，让我们可以决定是否真的要离开路线(例如，如果我们希望防止我们的用户在填写表单时丢失未保存的更改并意外点击按钮取消流程).

You can use CanDeactivate guard that gives us the possibility to decide if we really want to navigate away from a route (for example if we want to prevent our users from losing unsaved changes when filling out a form and accidently clicking on a button to cancel the process).

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

The CanDeactivate guard also has access to the instance of the active component, so we can implement a hasChanges() that check if there have been changes and conditionally ask for the user confirmation before leave. In the following example the CanDeactivateComponent implements the methods hasChanges() that returns a boolean value indicating if the components has detected any changes (we can check the dirty state of the form comparing its previous model and with the current one). The implementation of CanDeactivate guard is similar to the CanActivate guard implelementaion (we can create a function, or a class that implements the CanDeactivate interface):

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 使用泛型，因此我们需要指定要停用的组件类型.

Even though, this is a very trivial implementation, there’s one thing that we didn’t see in the previous example. CanDeactivate uses a generic, so we need to specify what component type we want to deactivate.

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

We implement a method canDeactivate(), that is called by Angular’s router internally if needed.

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

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

Last, like all other services on Angular, this guard needs to be registered accordingly:

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

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

We can have multiple guards protecting a single route, which helps us implementing sophisticated use cases, where a chain of different checks is needed.

这篇关于如何在角度 4 退出时实现确认?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！