Angular 16中如何通过依赖注入使用CanActivateFn函数式守卫

在Angular 16的函数式路由守卫里，不再通过构造函数注入依赖，而是直接用Angular提供的inject()函数来获取所需服务，这也是官方推荐的写法。

你的代码其实已经实现了依赖注入，但可以优化写法，避免在操作符回调里重复调用inject()：

优化后的守卫代码 #

export const authGuard: CanActivateFn = (
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) => {
  // 提前注入所需服务，避免在操作符内重复调用
  const tokenService = inject(TokenService);
  const router = inject(Router);

  return tokenService.authenticated.pipe(
    take(1),
    map((status) => {
      console.log('auth status: ', status);
      if (!status) {
        return router.createUrlTree(['/login']);
      }
      return true;
    })
  );
};

关键说明 #

• inject()函数是Angular的依赖注入API，只能在注入上下文中调用，而函数式守卫的执行逻辑正好处于这个上下文内，所以可以直接使用。
• 建议在函数顶部集中注入所需服务，不要在map这类操作符的回调里重复调用inject()——虽然语法允许，但会降低代码可读性，也不符合最佳实践。
• 你的路由配置写法是正确的，直接把authGuard作为数组项传入canActivate即可，无需额外调整。

路由配置（保持原写法即可） #

const routes: Routes = [
  {
    path: '',
    component: DefaultComponent,
    canActivate: [authGuard],
    children: [
      {
        path: '',
        component: DashboardComponent,
        data: { title: 'My Dashboard' },
      },
    ]
  }
];

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