当前位置：首页 > news >正文

Angular 依赖注入

news 2025/7/30 8:47:24

Angular为什么会有依赖注入

Angular.js 起初是为了解决谷歌内部复杂中大型的前端应用，同时是一批 Java 程序员打造的，所以首次在前端中大胆引入了依赖注入，那么 Angular 是基于 Angular.js 打造的新一代前端框架，所以延续了依赖注入特性，并改善了层级注入器，同时采用了更优雅的装饰器 API 形式
Angular 的服务 + 依赖注入完美解决了数据共享和逻辑复用问题，服务本质上和 React Hooks 没有太多的区别，只是 API 形态不一样，一个是通过函数形式一个是通过类+依赖注入，因为这两个框架的底层机制和思想不一样，导致了 API 表现形式的不同，但是最终都是在解决数据共享和逻辑复用的问题。

@[Injectable](https://angular.cn/api/core/Injectable) 装饰器以表明此类可以被注入
在组件级别，使用 @[Component](https://angular.cn/api/core/Component) 装饰器的 providers 字段
在 NgModule 级别，要使用 @[NgModule](https://angular.cn/api/core/NgModule) 装饰器的 providers 字段
在应用程序根级别，允许将其注入应用程序中的其他类。这可以通过将 providedIn: 'root' 字段添加到 @[Injectable](https://angular.cn/api/core/Injectable) 装饰器来实现

摇树优化

检查注入器中是否有该服务的实例，如果没有注入器就会使用注册的提供者创建一个，并将其添加到注入器中。

在这里插入图片描述

使用 Angular 构建的应用程序可能会变得非常大，管理这种复杂性的方法之一是将应用程序拆分为许多封装良好的小模块，这些模块本身也会拆分为定义明确的组件树。

注入器层次结构的类型

ModuleInjector 层次结构
- 使用 @[Injectable](https://angular.cn/api/core/Injectable)() 的 providedIn 属性优于 @[NgModule](https://angular.cn/api/core/NgModule)() 的 providers 数组。使用 @[Injectable](https://angular.cn/api/core/Injectable)() 的 providedIn 时，优化工具可以进行摇树优化，从而删除你的应用程序中未使用的服务，以减小包尺寸。
- providedIn: 'root'
  - Services are singleton for the whole application, also for lazy loaded modules(eagerly-loaded modules)
  - No need to explicitly register the service with a NgModule
- providedIn: 'platform'
- providedIn: 'any' // DEPRECATED since Angular v15
- providedIn: MyModule // DEPRECATED since Angular v15
- providedIn: MyComponent // DEPRECATED since Angular v15
ElementInjector 层次结构
- Angular 会为每个 DOM 元素隐式创建 ElementInjector。
- @[Directive](https://angular.cn/api/core/Directive)() 和 @[Component](https://angular.cn/api/core/Component)()

在这里插入图片描述

解析修饰符

如果 Angular 找不到你要的东西该怎么办，用 @[Optional](https://angular.cn/api/core/Optional)()
从哪里开始寻找，用 @[SkipSelf](https://angular.cn/api/core/SkipSelf)()
到哪里停止寻找，用 @[Host](https://angular.cn/api/core/Host)() 和 @[Self](https://angular.cn/api/core/Self)()