java - 如何制作一个警告框来询问用户是否要离开页面或不仅仅是 Angular ？

Question

我每天都会看到一些应用程序有一个功能，当您在页面上填写表单时，当您尝试单击其他位置(例如导航菜单中)甚至离开页面时，您有不安全的更改，他们询问用户是否要离开页面，如果有人能为我提供一个如何在 Angular 中实现这一点的示例，我将非常感激，我不确定这是后端的前端工作还是后端工作我正在使用java。非常感谢，每个想法都很重要:D。

Answer 1

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

首先您必须添加此服务文件“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 
    }
    ])
  ]