-1

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

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

4

3 回答 3

0

您可以在 ng-form 中添加指令并在确认指令上放置一个属性，如下所示。我希望这能帮到您

<form name="FormName">
            <confirm-exit is-dirty="FormName.$dirty"></confirm-exit>
<form>
于 2017-07-13T04:48:14.880 回答
0

您可以使用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 {}

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

于 2018-01-23T14:32:14.710 回答
0

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

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

于 2017-07-04T05:40:55.493 回答