如何在Angular的canActivate函数中正确使用inject？

错误原因是inject()只能在Angular的注入上下文中调用，你当前把注入语句放在了函数外部的顶层作用域，不属于合法的注入上下文，因此触发报错。

直接将注入操作移到canActivateCartGuard函数内部即可，同时不需要额外使用effect（守卫是路由激活前的一次性检查，无需监听购物车的实时变化）：

export const canActivateCartGuard: CanActivateFn = (route, state) => {
  const cartService = inject(CartService);
  const toastr = inject(ToastrService);
  
  const numberOfCartItems = cartService.cartSignal().length;
  
  if(numberOfCartItems) {
    return true;
  }
  toastr.error("Your cart is currently empty!", "")
  return false;
};

补充说明 #

• CanActivateFn类型的守卫函数本身属于Angular的注入上下文，允许在内部直接调用inject()获取服务实例。
• 原代码中的effect是用于响应式状态的持续监听，而守卫只需要在路由激活时做一次即时检查，因此完全不需要这个逻辑。

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