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

Question

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

我如何建立我的守卫，以便我可以将它应用到我的路线上，并防止用户意外地离开脏表单？

我正在尝试将表单注入(inject)守卫组件，观察它是否脏了，如果脏了，将该守卫应用到任何其他路由并让用户在导航到它们之前进行确认。这是我所能得到的最接近的结果，我们将不胜感激任何帮助。

这是我目前所拥有的:

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