Angular 16中无需ActivatedRoute，如何在函数式canActivate守卫获取动态参数？

问题根源 #

你手动注入ActivatedRoute导致参数获取失败，因为守卫执行阶段当前路由尚未完全激活，注入的ActivatedRoute快照可能指向旧路由或未初始化的状态，所以拿不到最新的参数。

正确方案：使用守卫回调的参数（无需手动注入ActivatedRoute） #

函数式canActivate守卫的回调函数会自动接收ActivatedRouteSnapshot（当前待激活的路由快照）作为参数，直接通过这个参数就能获取动态路由参数，这是Angular推荐的标准方式，不会出现null问题。

示例代码：

import { CanActivateFn, ActivatedRouteSnapshot } from '@angular/router';

export const postGuard: CanActivateFn = (route: ActivatedRouteSnapshot) => {
  const username = route.paramMap.get('username') as string;
  const id = route.paramMap.get('id') as string;
  
  console.log(username); // 可正确获取参数值
  console.log(id);

  // 此处添加你的守卫逻辑（如权限校验等）
  return true;
};

额外场景处理 #

如果你的目标参数定义在父路由中，需要通过parent属性获取父路由快照的参数：

// 假设username在父路由，id在当前路由
const username = route.parent?.paramMap.get('username') as string;
const id = route.paramMap.get('id') as string;

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