Angular 的分层依赖注入是如何工作的？

Question

Accepted Answer

Angular 的 DI 是**分层的**：注入器形成一个树状结构，该结构与组件/模块树相互对应。当组件请求依赖时，Angular 会沿着**向上**的注入器树进行查找，直到找到提供者为止——这决定了你获得共享单例还是针对每个组件的单独实例。 ## 注入器层级 ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` 查找从请求的组件开始，逐级向上冒泡至根节点。**第一个**找到的提供者将被使用。 ## 在哪里提供决定了作用域 ```ts // 1. App-wide singleton — ONE instance shared everywhere @Injectable({ providedIn: "root" }) export class AuthService {} // 2. Component-scoped — a NEW instance per component (and its children) @Component({ selector: "app-widget", providers: [DataService], // each gets its OWN DataService }) export class WidgetComponent {} ``` 这是关键的控制杆：`providedIn: 'root'` 会产生单个共享实例；在组件的 `providers` 数组中列出提供者会创建一个限定于该组件子树的新实例（适合隔离每个组件的状态）。 ## 注入修饰符 ```ts constructor( @Optional() private logger: Logger, // null instead of error if not provided @Self() private local: LocalService, // only look in THIS injector @SkipSelf() private parent: ParentService, // skip self, start at the parent @Host() private host: HostService, // stop at the host component ) {} ``` 这些装饰器控制 Angular 在注入器树中搜索的*范围*——例如 `@Optional` 可以在依赖缺失时避免错误，`@SkipSelf` 强制使用父级的实例。 ## 非类依赖的注入令牌 ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` 令牌允许你注入值/配置（而不仅仅是类）并交换实现（`useClass`、`useValue`、`useFactory`）。 ## 为什么这很重要理解分层注入器有助于解释*为什么*某个服务在整个应用中是共享的，而不是在每个组件中重复——这是"为什么这些组件会共享/不共享状态？"困惑的常见原因。控制提供者作用域（`root` 与组件 `providers`）、使用修饰符（`@Optional`、`@SkipSelf`）以及为配置/可交换实现使用注入令牌，这些是使 Angular 的 DI 在架构和测试中都强大有力的关键。