点击应用内银行账户操作链接触发TypeError错误的排查求助

别慌！这个错误几乎百分百和Angular的CanDeactivate路由守卫有关，咱们一步步来缩小范围、定位问题：

1. 先锁定关联的路由配置 #

首先打开你的路由模块，找到对应银行账户编辑/创建组件的路由规则，重点看canDeactivate属性：

• 检查是不是把非守卫类/函数的东西塞进了canDeactivate数组？比如拼写错误的守卫名、或者不小心写了字符串/布尔值；
• 举个典型错误：canDeactivate: ['MyGuard']（用了字符串而不是类），或者canDeactivate: [MyGuard]但MyGuard根本没实现CanDeactivate接口。

2. 检查守卫类的实现细节 #

如果路由配置看起来没问题，打开你的守卫类，确认这几点：

• 有没有正确实现Angular的CanDeactivate接口？
• canDeactivate是不是一个合法的方法？比如签名要符合要求：

import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

export class BankAccountGuard implements CanDeactivate<YourAccountComponent> {
  canDeactivate(
    component: YourAccountComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    // 你的业务逻辑，比如询问用户是否离开
    return window.confirm('确定要离开吗？');
  }
}

• 别犯低级错误：比如把canDeactivate写成了类属性（canDeactivate = true）而不是方法！

3. 排查组件内的守卫逻辑（如果用了组件级守卫） #

有些项目会让组件自身实现CanDeactivate接口（组件自己当守卫），这时候检查你的银行账户组件：

• 有没有正确定义canDeactivate方法？
• 是不是误删了这个方法，或者把它改成了非函数类型（比如字符串、数字）？

4. 用浏览器调试工具精准定位 #

打开浏览器开发者工具（F12），找到错误栈里的PreActivation.prototype.runCanDeactivate这一行，点击进入源码：

• 看看当前的guard变量是什么值？是undefined？还是一个不是函数的对象？
• 顺着调用栈往上追溯，就能直接看到这个守卫是从哪条路由配置来的，瞬间锁定问题点。

5. 临时移除守卫做验证 #

如果还是摸不着头绪，先把对应路由的canDeactivate配置注释掉，再点击链接测试：

• 如果错误消失了，那问题肯定出在这个守卫上；
• 如果错误还存在，那可能是全局路由守卫的问题，或者是路由跳转时的其他异步逻辑（比如resolve守卫）出了问题。

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