Angular如何实现通用路由离开未保存变更检测确认守卫

第一步：定义通用校验接口 #

先定义一个无业务耦合的标准接口，所有需要做未保存变更校验的组件都要实现该接口，组件自行内部处理校验逻辑，守卫不需要感知各组件的内部实现细节。

// 通用接口：所有需要使用未保存变更守卫的组件都需要实现该接口
export interface ComponentWithUnsavedChanges {
  // 自定义返回当前组件是否存在未保存的变更
  hasUnsavedChanges(): boolean;
}

第二步：改造通用守卫 #

将守卫的泛型绑定为上面定义的通用接口，不需要和任意业务组件绑定：

@Injectable({ providedIn: 'root' })
export class UnsavedChangesGuard implements CanDeactivate<ComponentWithUnsavedChanges> {
  canDeactivate(component: ComponentWithUnsavedChanges) {
    // 组件无未保存变更，直接允许路由跳转
    if (!component.hasUnsavedChanges()) {
      return true;
    }
    // 存在未保存变更时弹出二次确认框，用户确认后才允许跳转
    return confirm('您有未保存的变更，确定要离开当前页面吗？');
  }
}

第三步：业务组件适配 #

所有携带表单、需要做未保存校验的组件，实现通用接口即可：

@Component({
  // 你的组件基础配置
})
export class MyComponent implements ComponentWithUnsavedChanges {
  myForm: FormGroup; // 你的业务表单实例

  // 实现接口方法，自定义当前组件的未保存变更校验逻辑
  hasUnsavedChanges(): boolean {
    // 可根据业务需求自由扩展，比如支持多表单校验、其他非表单字段的变更校验等
    return this.myForm.dirty;
  }
}

第四步：路由配置使用 #

需要启用校验的路由直接添加守卫即可，无需额外配置：

const routes: Routes = [
  {
    path: 'my-page',
    component: MyComponent,
    canDeactivate: [UnsavedChangesGuard]
  },
  // 其他需要校验的路由都可以直接复用这个守卫
  {
    path: 'other-form-page',
    component: OtherFormComponent,
    canDeactivate: [UnsavedChangesGuard]
  }
];

内容的提问来源于stack exchange，提问作者user16778562