使用 Angular DevTools 的 Injector Tree 检查应用依赖注入层级

Angular DevTools 的 Injector Tree（注入器树） 标签页以可视化树形图的形式呈现应用运行时的依赖注入（Dependency Injection，DI）体系，帮助开发者直观地理解 EnvironmentInjector 与 ElementInjector 的层级关系、依赖解析路径以及每个注入器上的 Provider 配置。读完本文，你将掌握如何通过注入器树排查"某个服务从哪里被解析"、验证 DI 层级是否如预期配置，以及快速把任意 Provider 输出到控制台进行调试。

前提说明：Injector Tree 功能仅适用于 Angular 17 及以上版本构建的应用。本节文档位于 adev/src/content/tools/devtools/injectors.md，与 DevTools 前端实现位于仓库的 devtools/ 目录。

Injector Tree 能做什么：两张树看到 DI 全貌

Angular 的依赖注入体系由两类层级（hierarchy）构成，关于其完整的定义与配置方式，可参阅 层级化依赖注入指南：

注入器层级	说明
EnvironmentInjector 层级	通过 @Service() 装饰器或 ApplicationConfig 的 providers 数组配置；NgModule 应用则使用 @NgModule()/@Injectable() 配置出 ModuleInjector 层级。
ElementInjector 层级	为每个 DOM 元素隐式创建，默认为空；只有通过 @Directive()/@Component() 上的 providers 或 viewProviders 配置后才有内容。

在 Injector Tree 标签页中，DevTools 会为这两类层级分别渲染一棵树：

• Environment Hierarchy（环境层级树）：展示环境注入器的父子结构；
• Element Hierarchy（元素层级树）：展示组件/指令对应的元素注入器结构。

从源码实现看，前端视图由 injector-tree.component.html 定义，左右两个面板使用共享的 ng-tree-visualizer（基于 D3 的可视化组件）分别渲染两棵树；InjectorTreeComponent（见 injector-tree.component.ts）从后端传来的 directive forest 中提取每个节点的 resolutionPath，把"指令森林"转换成两棵注入器树。转换与拆分逻辑集中在 injector-tree-fns.ts 中：

• grabInjectorPathsFromDirectiveForest() 遍历整个指令森林，收集每个节点的解析路径；
• splitInjectorPathsIntoElementAndEnvironmentPaths() 依据注入器类型把每条路径切分为元素路径与环境路径，并对环境树中出现的 environment、null（NullInjector）、imported-module 三类注入器做区分（见 isEnvironmentTreeInjector）；
• transformInjectorResolutionPathsIntoTree() 将路径数组合并为一棵可渲染的层级树。

打开 DevTools 的 Injector Tree 标签页后，即可看到当前应用的两棵注入器层级树视图：

树上的过滤与显示细节

• 视图顶部提供了两个实用的过滤开关（见 injector-tree.component.html）：
  • Hide injectors with no providers：隐藏没有任何 Provider 的注入器（对应 filterOutInjectorsWithNoProviders）；
  • Hide framework injectors：隐藏框架内部的注入器，便于聚焦业务注入器。源码中内置了一份 Angular 内部指令/注入器名单（如 NgIf、NgForOf、RouterOutlet、Null Injector 等，见 injector-tree-fns.ts），filterOutAngularInjectors 会把它们从路径中剔除。
• 树中每个节点会显示注入器名称，若该注入器配置了 Provider，还会以 N Provider / N Providers 的形式标注数量（见 injector-tree-fns.ts）。
• 两个面板之间的分隔条可在窄屏下自动切换为左右布局，从而兼顾窄视口下的可读性。

可视化解析路径：看清一次依赖查找的完整轨迹

当在树中选中某个具体的注入器时，DevTools 会高亮"Angular 依赖注入算法从该注入器一路向上到根注入器"所遍历的解析路径（resolution path）。对元素注入器而言，高亮还包含：当依赖在元素层级中无法被解析时，DI 算法所"跳跃"到的 EnvironmentInjector——这正是 DI 的两阶段解析规则在可视化上的体现：

1. 先沿 ElementInjector 层级向父级查找；
2. 仍找不到时，回到请求发起的元素，沿 EnvironmentInjector 层级查找。

关于解析规则（self、skipSelf、host、optional 等修饰符如何改变查找起点与终点）的完整说明，请参阅层级化依赖注入指南中的 解析规则章节 与 解析修饰符章节。选中注入器后，观察高亮路径能直接回答两类高频问题：

• "这个组件的依赖到底是谁提供的？"——高亮终点即答案；
• "如果我在某个位置 provide 一个同名 Token，谁会覆盖谁？"——路径上高亮的注入器优先于更远处的 Provider。

从实现层面看，选中节点时组件会调用 selectInjectorByNode()（见 injector-tree.component.ts），随后 highlightPathFromSelectedInjector() 负责点亮节点与连线：

• getInjectorIdsToRootFromNode() 从当前节点沿 parent 指针逐级上溯收集到根的节点 ID 序列；
• 对元素注入器，还会读取 elementToEnvironmentPath 映射（由路径拆分时生成），把该元素注入器"跳跃到"的环境注入器链同步高亮（见 injector-tree-fns.ts）；
• 树的连线箭头方向为 child-to-parent，即自下而上指向父注入器，与依赖解析的"向上查找"语义一致。

选中一个元素注入器后，元素树与环境树中被命中的解析路径会同时点亮：

查看注入器上的 Provider：Token、类型与控制台日志

点击某个配置了 Provider 的注入器，其所有 Provider 会以列表形式呈现在树的右侧面板中（界面实现见 injector-providers.component.ts 与 DevTools 主面板 HTML 的分栏布局 injector-tree.component.html）。列表的核心信息包括：

• Token：被提供的注入令牌（token 字符串）；
• Type：Provider 的提供方式。DevTools 将源码层的 Provider 形态映射为可读标签（见 providerTypeToLabel）：

UI 显示	含义
Type	直接提供类（useClass/类本身）
useExisting	引用已有 Provider（对应 existing）
useFactory	工厂函数（对应 factory）
useClass	指定实现类（对应 class）
useValue	提供字面值（对应 value）
Internal	框架内部 Provider（对应 internal）

• isViewProvider：当选中元素注入器时，表格还会额外显示 isViewProvider 列，用于区分 Provider 是配置在 providers 还是 viewProviders 中——这对排查"内容投影（<ng-content>）为何看不到某服务"非常有用（表格列逻辑见 injector-providers.component.ts）。
• 每个 Provider 右侧的按钮可将该 Provider 打印到浏览器控制台：面板内通过消息总线发送 logProvider 事件（见 select() 方法），后端收到后在控制台输出该 Provider 的完整结构。当需要深入检查某个 Provider 实例的具体值、工厂逻辑或依赖时，配合控制台展开输出即可进一步下钻。

面板还支持按 Token 关键字与 Provider 类型进行过滤（对应的 visibleProviders 计算逻辑位于 injector-providers.component.ts），在注入器上挂载大量 Provider（例如大型路由或表单模块）时可以快速定位目标。

版本限制与数据来源

Injector Tree 标签页所依赖的 DI 调试数据（即每个指令节点的 resolutionPath）由应用侧的 DI debug API 提供。前端组件在初始化时通过 diDebugAPIsAvailable 计算属性探测：只有当 directive forest 的首个节点携带 resolutionPath 时才渲染可视化界面，否则显示"仅 Angular 17.0.0 及以上版本可用"的提示（见 injector-tree.component.ts 与 injector-tree.component.html）。后端负责序列化注入器信息并随组件树一起回传（相关逻辑可参考 component-tree.ts 与 client-event-subscribers.ts）。

在实际调试中使用时，建议先熟悉应用在 ApplicationConfig.providers、@Service()、@Component() 与 @Directive() 各层的 Provider 配置，再结合以下排查套路使用 Injector Tree：

1. 在元素树中找到目标组件对应的注入器节点；
2. 观察高亮的解析路径，判断依赖最终落在元素层级还是环境层级，从而确认 providers/viewProviders/root 配置是否生效；
3. 对"意外拿到父级实例"或"得到 null/报错"的疑难问题，结合 skipSelf、host 等修饰符在路径上的体现逐一验证；
4. 通过 Provider 面板的 log 按钮在控制台检查具体实例内容。

Injector Tree 把原本"黑盒"的 DI 运行时行为转译为可交互的可视化层级，配合 层级化依赖注入指南 中的理论模型，即可实现从"写出配置"到"验证行为"的闭环调试。