Angular 里 inject() 在组件外为啥报错？

这个问题踩坑的人挺多的，我来给你捋清楚。

根本原因是 inject() 函数依赖于 Angular 的注入上下文。Angular 内部维护了一个全局的上下文状态，只有在这个上下文里，inject() 才能找到当前的注入器并解析依赖。组件、指令、Pipe 的构造函数执行时，Angular 会自动设置这个上下文，所以你在组件里用没问题。但你的 fetchData() 是个普通函数，被调用的时候 Angular 根本不知道自己在哪次实例化流程里，上下文是空的，当然报错。

解决方案有三种，我按推荐程度排序说。

第一种，也是最推荐的做法：把依赖作为参数传入。这其实是更纯粹的设计，函数不关心依赖从哪来，只管用。

import { HttpClient } from '@angular/common/http';



// 函数只负责逻辑，依赖由调用方提供

function fetchData(http: HttpClient) {

  return http.get('/api/data');

}



// 在组件或服务里调用

@Component({...})

export class MyComponent {

  private http = inject(HttpClient);

  

  loadData() {

    fetchData(this.http).subscribe(data => {

      console.log(data);

    });

  }

}

这种写法最大的好处是函数变得可测试，你传个 mock 的 HttpClient 进去就能测，完全不需要 Angular 的测试环境。

第二种方案，如果你确实想保持 inject() 在函数内部的写法，可以用 runInInjectionContext 强行创建上下文。但你需要先拿到一个注入器实例。

import { inject, runInInjectionContext, Injector } from '@angular/core';

import { HttpClient } from '@angular/common/http';



// 这种写法需要调用方传入 Injector

function fetchData(injector: Injector) {

  return runInInjectionContext(injector, () => {

    const http = inject(HttpClient);

    return http.get('/api/data');

  });

}



// 组件里调用

@Component({...})

export class MyComponent {

  private injector = inject(Injector);

  

  loadData() {

    fetchData(this.injector).subscribe();

  }

}

这种写法的问题是你把 Injector 满天飞，其实跟第一种方案比起来没啥优势，反而更绕了。

第三种方案，如果你有很多这样的工具函数，可以考虑把它们封装成一个服务。服务本身就是注入上下文，构造函数里可以用 inject()。

@Injectable({ providedIn: 'root' })

export class DataService {

  private http = inject(HttpClient);

  

  fetchData() {

    return this.http.get('/api/data');

  }

  

  // 其他工具方法...

}



// 然后在任何组件或服务里注入这个服务

@Component({...})

export class MyComponent {

  private dataService = inject(DataService);

  

  loadData() {

    this.dataService.fetchData().subscribe();

  }

}

还有个常见的误区得说一下：有人觉得在函数内部用 inject() 就能实现类似 React Hooks 的效果，每次调用自动获取依赖。但 Angular 和 React 的机制完全不同。React Hooks 依赖组件的渲染周期和 Fiber 架构来追踪状态，Angular 的 DI 系统是基于注入器和依赖树的，两者根本不是一套东西。硬要模仿只会给自己挖坑。

总结一下：首选参数传入依赖，其次考虑封装成服务，runInInjectionContext 这种方案除非有特殊需求否则不太建议用。Angular 的设计哲学就是这样，依赖要显式声明和管理，虽然啰嗦一点，但胜在清晰稳定。