angular8表单界面离开时，如果表单内容有变化提醒用户是否离开

访问地址：https://zhtt.gitee.io/angular-demo/ng-zorro/#/form/form-leave2

业务场景：猪八戒正在填写一张特别大、特别复杂的表单，在快要填完的时候，孙悟空突然有一件紧急事情要八戒去处理，八戒来不急保存直接离开了电脑，等完事回来时电脑已经黑屏，猪八戒一顿乱敲键盘、狂点鼠标，结果不小心点了其他菜单导致离开了表单进入了被点击的菜单，此时八戒只能抱怨死猴子了。如果我们能在表单界面离开时，检测表单内容有了变更，提醒一下用户是不是会很好。下面开始表演真正的绝技了：

安装依赖

npm i great-ngform --save
npm i great-zorroutils --save

示例效果：

示例代码：

1、在路由中，为表单路由增加”canDeactivate“属性

const routes: Routes = [
  {path: 'form-leave', component: FormFormLeaveComponent, canDeactivate: [CanDeactivateGuard]},
  {path: 'form-leave2', component: FormFormLeave2Component, canDeactivate: [CanDeactivateGuard]}
];

2、在组件中注入工具类

constructor(
    private messageService: MessageUtilService,
  ) {
  }

3、在组件中检测表单是否有变更

方式一：

  canDeactivate(
    component?: any,
    currentRoute?: ActivatedRouteSnapshot,
    currentState?: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable<boolean> | boolean {
    if(this.formGrop.dirty){
      return this.messageService.confirm();
    }else{
      return true;
    }
  }

方式二：

  canDeactivate(
    component?: any,
    currentRoute?: ActivatedRouteSnapshot,
    currentState?: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable<boolean> | boolean {
    if (this.formGrop.dirty) {
      return this.messageService.canDeactivate(
        (saveCallback) => { // 点击离开并保存执行的回调
          // 调用后台保存接口
          // 后台接口返回后
          // 如果后台保存成功则执行：saveCallback(true);
          // 如果后台保存失败则执行：saveCallback(false);
          this.messageService.loading('正在调用后台接口保存，保存成功后将会离开！')
          setTimeout(()=>{
            saveCallback(true);
          }, 3000)
        },
        () => { // 点击取消按钮需要执行的回调（可选参数）
        }
      );
    } else {
      return true;
    }
  }