Angular中的注入上下文定义了应用程序组件树中特定位置可用于注入的提供者集合。它决定了inject()函数在何处以及如何解析依赖项，确保组件或服务能够访问所需的依赖。理解注入上下文对于正确管理依赖、避免运行时错误以及有效利用Angular的依赖注入系统至关重要，尤其是在处理传统构造函数之外的注入场景时。
什么是注入上下文？
在angular中，依赖注入（di）是一个核心概念，用于提供组件、服务或其他类所需的依赖项。注入上下文可以被理解为在应用程序的特定执行点上，可用于inject()函数解析依赖项的提供者（provider）集合。当一个组件被实例化时，angular会为其建立一个注入上下文。这个上下文首先在其自身的注入器中查找提供者，然后递归地向上遍历其父级注入器，直到根注入器，以此来确定可用的服务。
简单来说，注入上下文就是inject()函数能够找到并提供依赖的“环境”。
注入上下文的重要性
注入上下文的重要性体现在以下几个方面：
依赖解析的范围控制：它精确地定义了在特定位置哪些服务是可用的。如果一个服务不在当前的注入上下文中，那么尝试注入它将导致运行时错误。避免运行时错误：通过在组件树的适当级别定义提供者，可以确保在需要时它们是可用的，从而避免“No provider for X!”之类的错误。优化应用性能与内存：合理管理提供者作用域（例如，使用providedIn: ‘root’、’platform’或特定模块/组件）可以控制服务的生命周期和实例化次数，有助于优化资源使用。支持更灵活的注入模式：随着Angular的发展，inject()函数不再局限于构造函数，而注入上下文的概念变得更加关键，以支持在任何地方（如函数、字段初始化器）进行注入。
inject() 函数与默认注入上下文
inject()函数是Angular中用于在不依赖构造函数参数的情况下获取依赖项的核心API。它需要在一个有效的注入上下文中被调用。Angular会自动为以下场景提供默认的注入上下文：
构造函数（Constructor）：这是最常见的注入点。当Angular实例化一个类时，它会自动在构造函数执行期间建立注入上下文。
import { Component, inject } from '@angular/core';import { MyService } from './my.service';@Component({ selector: 'app-my-component', template: `...`})export class MyComponent { // 在构造函数中，inject() 自动工作 private myService: MyService; constructor() { this.myService = inject(MyService); }}
工厂函数（Factory Function）：当定义一个提供者，其useFactory属性是一个函数时，该工厂函数在执行时也会处于一个注入上下文中。
import { InjectionToken, inject } from '@angular/core';export const CONFIG_TOKEN = new InjectionToken('Config Token', { providedIn: 'root', factory: () => { // 在工厂函数中，inject() 自动工作 const env = inject(EnvironmentService); // 假设有一个 EnvironmentService return env.getApiUrl(); }});
字段初始化器（Field Initializer）：在Angular 14+中，inject()可以直接在类字段的初始化器中使用，这极大地简化了代码。
import { Component, inject } from '@angular/core';import { MyService } from './my.service';@Component({ selector: 'app-my-component', template: `...`})export class MyComponent { // 在字段初始化器中，inject() 自动工作 private myService = inject(MyService); // 其他逻辑...}
在上述所有情况下，Angular运行时会确保在inject()被调用时存在一个有效的注入上下文。
手动管理注入上下文：runInInjectionContext 与 EnvironmentInjector#runInContext
有时，我们需要在Angular无法自动提供注入上下文的地方（例如，普通的JavaScript函数、事件回调、定时器回调等）使用inject()。为了应对这种情况，Angular提供了手动建立注入上下文的机制。
runInInjectionContext(injector: Injector, fn: Function): any这是Angular 14+引入的一个实用函数，它允许你提供一个Injector实例，并在该注入器的上下文中执行一个函数。在函数执行期间，inject()就可以正常工作。
import { Component, inject, Injector } from '@angular/core';import { MyService } from './my.service';import { AnotherService } from './another.service';@Component({ selector: 'app-manual-context', template: ` `, standalone: true // 假设是独立组件})export class ManualContextComponent { private injector = inject(Injector); // 获取当前组件的注入器 loadData(): void { // 假设 MyService 和 AnotherService 需要在非 Angular 生命周期中被注入 // 比如在某个第三方库的回调中 setTimeout(() => { runInInjectionContext(this.injector, () => { // 在这个回调函数内部，inject() 可以正常工作 const myService = inject(MyService); const anotherService = inject(AnotherService); console.log('Services injected in manual context:', myService, anotherService); myService.doSomething(); }); }, 1000); }}
使用场景：
在非Angular管理的代码中（如Web Workers、Service Workers、第三方库回调）。在普通的JavaScript函数中，需要访问Angular服务。在测试环境中，模拟特定的注入上下文。
EnvironmentInjector#runInContext(fn: Function): anyEnvironmentInjector是Angular应用中最高级别的注入器之一，通常用于提供应用范围的服务。它的runInContext方法与runInInjectionContext类似，但它是EnvironmentInjector实例上的一个方法。
import { Injectable, EnvironmentInjector, inject } from '@angular/core';import { AppConfig } from './app-config.service';@Injectable({ providedIn: 'root'})export class StartupService { constructor(private environmentInjector: EnvironmentInjector) {} initializeApplication(): void { this.environmentInjector.runInContext(() => { // 在 EnvironmentInjector 的上下文中注入 AppConfig const config = inject(AppConfig); console.log('AppConfig loaded:', config.apiUrl); // 可以在这里执行一些依赖于根级服务的初始化逻辑 }); }}
使用场景：
在应用程序启动时，需要访问根级（providedIn: ‘root’）服务进行初始化，而这些初始化逻辑又不在组件或服务的构造函数中。需要在一个全局的、与组件树无关的上下文中执行注入操作。
总结与最佳实践
理解默认上下文：优先在Angular自动提供注入上下文的地方（构造函数、字段初始化器、工厂函数）使用inject()，这是最简洁和推荐的方式。按需手动管理：当需要在非默认注入点使用inject()时，利用runInInjectionContext或EnvironmentInjector#runInContext来明确建立注入上下文。选择合适的注入器：使用runInInjectionContext时，传入的Injector实例至关重要。它决定了inject()将从哪个层级的注入器开始查找依赖。通常，你可以注入Injector本身来获取当前组件或服务的注入器。避免滥用：频繁地手动创建注入上下文可能会使代码变得复杂，并可能隐藏依赖关系。应仅在确实需要时使用这些高级功能。提供者作用域：始终考虑你的服务应该在哪个作用域可用（例如，providedIn: ‘root’用于单例，特定模块或组件的providers数组用于局部作用域），这直接影响到注入上下文的构建。
通过深入理解注入上下文，开发者可以更精确地控制依赖的解析过程，编写出更健壮、可维护的Angular应用。
以上就是Angular 16+ 注入上下文深度解析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/143543.html
微信扫一扫 
支付宝扫一扫 
