如何在角度4的出口处实施确认? [英] how to implement confirm on exit in angular 4?

问题描述

我想知道如何实现退出时确认组件，以便在页面刷新或离开选项卡，窗口或屏幕时可以执行退出时确认，因此，如果用户单击OK，他将离开屏幕上，并单击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屋！