Angular中canDeactivateFn守卫正确使用方法及代码问题排查

问题核心 #

你已经正确定义了canDeactivateFn类型的守卫函数，但路由配置里没有引用你写的leaveRoute守卫，导致函数逻辑根本没执行。

正确配置步骤 #

1. 确认守卫函数定义（你的代码没问题，保留即可）

/*
  用户离开组件时自动保存数据
*/
export const leaveRoute: CanDeactivateFn<EnglishComponent> = (
  component: EnglishComponent, 
  currentRoute: ActivatedRouteSnapshot, 
  currentState: RouterStateSnapshot, 
  nextState: RouterStateSnapshot
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree  => {
    console.log('hello')
    // 自动保存表单数据逻辑
    component.formValue = component.form.value
    component.form.setValue(component.formValue)
    return true
  }

2. 修改路由配置（关键：引用你的守卫函数）

把路由里的canDeactivate数组值替换成你定义的leaveRoute，而非匿名函数：

// 先导入你的守卫函数
import { leaveRoute } from './path-to-your-guard-file';

const routes: Routes = [
  {
    path: 'en',
    component: EnglishComponent,
    canDeactivate: [leaveRoute] // 这里使用你定义的守卫函数
  }
];

3. 额外注意事项

• 确保EnglishComponent已正确导入到守卫文件中
• 守卫返回true允许离开路由，返回false会阻止跳转；若需异步处理（比如弹窗确认），可返回Observable<boolean>或Promise<boolean>

官方文档要点参考 #

Angular官方文档明确说明：

函数式守卫（如canDeactivateFn）替代了传统的类守卫，它们是纯函数，直接接收当前组件实例、路由快照等参数，无需依赖注入。canDeactivateFn的作用是在用户尝试离开路由时执行自定义逻辑，决定是否允许跳转。

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