如何编写保护以防止用户在 Angular 6 中丢失表单数据？答案

【问题标题】：How to write a guard to keep a user from losing form data in Angular 6?如何编写保护以防止用户在 Angular 6 中丢失表单数据？
【发布时间】：2019-05-21 06:18:22
【问题描述】：

我希望在我的 Angular 6 应用程序中创建一个守卫，通过要求他们确认来防止用户从部分填写的表单中导航离开网站内的表单（而不是通过关闭浏览器或刷新）第一的。

我如何构建我的守卫，以便我可以将其应用于我的路线并防止用户意外导航离开脏表单？

我正在尝试将表单注入防护组件，观察它是否脏，如果是，则将该防护应用于任何其他路由并让用户在导航到它们之前进行确认。这大约是我能得到的，任何帮助将不胜感激。

这是我目前所拥有的：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';
import { NgForm } from "@angular/forms";
import { createMPForm } from "../components/site-settings/site-settings.component"

@Injectable({
  providedIn: 'root'
})

@Injectable()
export abstract class FormGuard implements CanActivate {
  abstract get form(): NgForm;
  formDirty(): boolean {
     return createMPForm.dirty
  }

  constructor() { }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.formDirty()) {
      if (confirm("You have unsaved changes! If you leave, your changes will be lost.")) {
        return true;} 
      else {
        return false;}
    }
  }
}

在我的表单组件中我有这个，所以表单对象可以被守卫导入：

export class createMPForm {
   @ViewChild("createMPForm", {read: ElementRef}) form: ElementRef;
 }

我的路线看起来像这样：

import { FormGuard } from './services/form-guard.service';
import { SiteSettingsComponent } from './components/site-settings/site-settings.component';
import { SiteComponent } from './components/site/site.component';
import { AuthGuard } from './services/auth-guard.service';

const routes: Routes = [
  { path: 'sites', component: SitesComponent, canActivate: [AuthGuard] }, //the route I want to keep from navigating to if the form is dirty
  { path: 'site-settings/:siteHid', component: SiteSettingsComponent, canActivate: [AuthGuard] }// the route with the form
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthGuard, FormGuard]
})

【问题讨论】：

阅读一下这个话题：netbasal.com/… 这家伙有很多有用的 Angular 东西

标签： angular typescript guard

【解决方案1】：

您正在寻找的是 CanDeactivate 守卫。这是一个守卫，将在离开路由之前调用，并提供当前路由已呈现的组件。

你可以这样实现：

interface FormComponent {
  hasUnsavedChanges: boolean
}

class FormGuard implements CanDeactivate<FormComponent> {
  canDeactivate(component: FormComponent) {
    return component.hasUnsavedChanges === false
  }
}

参考： https://angular.io/api/router/CanDeactivate

【讨论】：