顺德网站建设7starry积分兑换商城网站建设

Angular为什么会有依赖注入

• Angular.js 起初是为了解决谷歌内部复杂中大型的前端应用，同时是一批 Java 程序员打造的，所以首次在前端中大胆引入了依赖注入，那么 Angular 是基于 Angular.js 打造的新一代前端框架，所以延续了依赖注入特性，并改善了层级注入器，同时采用了更优雅的装饰器 API 形式

• Angular 的服务 + 依赖注入完美解决了数据共享和逻辑复用问题，服务本质上和 React Hooks 没有太多的区别，只是 API 形态不一样，一个是通过函数形式一个是通过类+依赖注入，因为这两个框架的底层机制和思想不一样，导致了 API 表现形式的不同，但是最终都是在解决数据共享和逻辑复用的问题。

Angular依赖注入

提供依赖项

• @[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)()

总结

Angular依赖注入

• 提供依赖项
• 注入依赖项
• 多级注入器
• 解析规则