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

Question

我希望在我的 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]
})

Answer 1

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

你可以这样实现：

interface FormComponent {
  hasUnsavedChanges: boolean
}

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

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