Angular中canDeactivate守卫解惑：为何需自定义接口？

这确实和Angular的内部路由机制直接相关，核心原因可以拆解成两点：

1. Angular路由系统的强制契约 #

Angular的路由守卫是框架层面的功能，它只认可实现了官方CanDeactivate<T>接口的类作为路由离开守卫。这个接口是Angular内部定义的规则，只有符合该规则的类，才能被路由系统识别，并在路由跳转触发时自动调用其canDeactivate方法。

如果你直接创建一个带自定义deactivate方法的类，Angular完全不知道它是一个守卫，自然不会在路由变更时执行它的逻辑——这是框架内部机制决定的，必须遵守这个规范。

2. 自定义接口是组件与守卫的统一契约 #

官方CanDeactivate<T>是泛型接口，其中的T就是用来约束当前路由对应的组件必须具备特定的方法（也就是你定义的CanComponentDeactivate接口）。这么做的目的是：

• 类型安全：通过TypeScript的类型检查，确保守卫在调用组件的canDeactivate方法时，不会出现“组件不存在该方法”的错误。
• 守卫通用化：让同一个守卫可以复用在多个组件上——只要组件实现了自定义接口，守卫就能直接调用其canDeactivate方法，无需为每个组件单独写守卫逻辑。

举个实际的工作流例子：

组件实现自定义接口 #

export class EditProfileComponent implements CanComponentDeactivate {
  canDeactivate(): boolean | Observable<boolean> {
    // 这里写具体的离开校验逻辑，比如判断表单是否未保存
    return this.profileForm.dirty ? confirm('表单未保存，确定离开？') : true;
  }
}

守卫调用组件的校验逻辑 #

export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(
    component: CanComponentDeactivate,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    // 直接调用组件自身的校验逻辑，无需关心组件具体是哪一个
    return component.canDeactivate();
  }
}

如果跳过自定义接口，你只能把组件类型设为any，这样会丢失类型检查，而且不同组件的校验方法签名可能不一致，守卫无法通用。自定义接口本质上是给组件和守卫之间定了一个统一的规则，让守卫能安全、通用地调用组件的离开校验逻辑。

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