如何制作一个警告框，询问用户是否要离开页面或不仅仅是角度？

Question

我每天都看到一些应用程序有一个功能，当你在一个页面上，你正在填写，例如，一个表格，当你尝试点击其他地方，例如在导航菜单中，甚至离开页面时，你有不安全的改变他们询问用户是否想离开页面，如果有人可以向我提供一个如何在 Angular 中实现的示例，我将不胜感激，我不确定这是我正在使用的后端中的前端还是后端作业爪哇。非常感谢，每个想法都很重要：D。

Answer 1

canDeactivate您可以为每个组件使用guard，

首先你必须添加这个服务文件“deactivate-guard.service.ts”：

import { Injectable } from '@angular/core';

import { CanDeactivate } from '@angular/router';

import { Observable } from 'rxjs/Observable';

export interface CanComponentDeactivate {

  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;

}

@Injectable()

export class DeactivateGuardService implements  CanDeactivate<CanComponentDeactivate>{

  canDeactivate(component: CanComponentDeactivate) {

    return component.canDeactivate ? component.canDeactivate() : true;

  }

}

那么你必须在应用程序模块中提供：

providers: [

    DeactivateGuardService

  ]

现在在您要保护的组件中，添加功能：

export class ExampleComponent {

    loading: boolean = false;

     @ViewChild('exampleForm') exampleForm: NgForm;

     canDeactivate(): Observable<boolean> | boolean {

        if (this.loading|| this.exampleForm.dirty) {

           return this.confirmBox('Discard Unsaved Changes?');

       }

       return true;

     }

    confirmBox(message?: string): Observable<boolean> {

       const confirmation = window.confirm(message || 'Are you sure?');

       return of(confirmation);

   };

}

将指令添加到路由模块中的组件：

@NgModule({

  imports: [

    RouterModule.forRoot([

      { 

      path: 'example', 

      canDeactivate: [DeactivateGuardService],

      component: ExampleComponent 

    }

    ])

  ]

Answer 2

您可以使用 canDeactivate 守卫检查页面离开并显示您希望显示类似内容的警告消息

import { Injectable } from '@angular/core';

import { CanDeactivate } from '@angular/router';

import { Observable } from 'rxjs/Observable';

export interface CanComponentDeactivate {

    canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;

}

@Injectable()

export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate>{

    canDeactivate(component: CanComponentDeactivate) {

        return component.canDeactivate ? component.canDeactivate() : true;

    }

}

包括设置可以激活守卫到这样的路线

{ path: 'sample-path', component: SampleComponent, canDeactivate: [CanDeactivateGuard] },

和组件的 canDeactivate 方法

canDeactivate() {

        if (this.formIsIncomplete > 0) {

            let result: boolean = window.confirm("You have unsaved Changes");

            return result;

        }

        return true;

    }