如何在Angular函数式canDeactivate守卫中获取nextState？

你之前的函数式守卫参数签名写错了，Angular的函数式CanDeactivateFn其实支持传入**组件实例、当前路由快照、当前状态快照、目标状态快照（也就是你要的nextState）**这四个参数。

修正后的守卫代码如下：

import { CanDeactivateFn, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { SomeComponent } from './some.component';

export const canDeactivateGuard: CanDeactivateFn<SomeComponent> = (
  component: SomeComponent, // 可选，不需要组件实例可省略类型或参数
  currentRoute: ActivatedRouteSnapshot,
  currentState: RouterStateSnapshot,
  nextState?: RouterStateSnapshot
) => {
  // 这里就能正常获取nextState了
  if (nextState?.url.includes('/error')) {
    return true;
  }
  return false;
};

关键说明： #

• 用CanDeactivateFn<T>泛型指定关联组件类型，可按需获取组件实例（比如要调用组件内的属性/方法时）
• nextState是可选参数，需用可选链?.避免空值报错
• 守卫注册方式无需改动，保持你原有的写法即可：

{
  path: 'somePath',
  component: SomeComponent,
  canDeactivate: [canDeactivateGuard]
}

当你在SomeComponent的ngOnInit里调用router.navigate('/error')时，守卫会自动传入目标状态的nextState，你就能正常判断URL了。

内容的提问来源于stack exchange，提问作者Min Naing Oo