Angular设计模式hierarchical injector实现代码复用模块化
Angular 的 "dependency injection"
Angular 的 "dependency injection" 是一种设计模式，它可以帮助我们更有效地组织和共享代码。在 Angular 中，我们可以通过注入服务（一个常见的可注入对象类型）到组件、指令或其他服务中，实现代码的复用和模块化。
Angular 的注入器系统是分层级的，也被称为 "hierarchical injector"。这意味着你可以在不同的层级创建和注入服务，从而决定它们的作用范围和共享行为。
工作原理
举个例子，假设你有一个 LoggerService 用于记录应用的日志信息。你可以在应用的根模块 AppModule 中提供这个服务：
import { LoggerService } from './logger.service';
@NgModule({
providers: [ LoggerService ],
...
})
export class AppModule { }这样，LoggerService 就成了一个单例服务，整个应用只会有一个 LoggerService 实例。你可以在任何需要的地方注入这个服务：
import { LoggerService } from './logger.service';
@Component({
...
})
export class SomeComponent {
constructor(private logger: LoggerService) {
this.logger.log('Hello World!');
}
}然而，有时候你可能希望在某个特定的组件及其子组件中使用一个独立的 LoggerService 实例。这时，你就可以在那个组件的元数据中提供 LoggerService：
import { LoggerService } from './logger.service';
@Component({
providers: [ LoggerService ],
...
})
export class SomeSpecificComponent {
constructor(private logger: LoggerService) {
this.logger.log('Hello Specific World!');
}
}在这种情况下，SomeSpecificComponent 及其所有子组件中注入的 LoggerService 都会是这个新的实例，而不是在 AppModule 中提供的单例。
这就是 Angular 的 "hierarchical injector" 的工作原理。每个注入器都有一个父注入器，当你尝试在某个组件中注入服务时，Angular 会首先在该组件的注入器中查找该服务，如果没找到，就会去父注入器中查找，这个过程会一直持续到根注入器。如果在整个过程中都没找到该服务，Angular 就会抛出错误。
以上就是Angular设计模式hierarchical injector实现代码复用模块化的详细内容，更多关于Angular hierarchical injector的资料请关注脚本之家其它相关文章！
相关文章
$http是angular中的一个核心服务，本篇文章主要介绍了angularJS之$http：与服务器交互示例，具有一定的参考价值，有兴趣的可以了解一下。2017-03-03
本篇文章主要介绍了Angular2 Service实现简单音乐播放器服务 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了详细分析使用AngularJS提交表单的方式,AngularJS是非常热门的JavaScript库,文中展示了AngularJS在前端与后端的PHP进行交互的场景,需要的朋友可以参考下2015-06-06
本文将介绍Angular子路由的用法，对此感兴趣的同学，可以参考下2021-05-05
这篇文章主要为大家详细介绍了基于angular实现三级联动的生日插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了使用AngularJS来实现HTML页面嵌套的方法,主要用到了AngularJS中的ng-include指令,需要的朋友可以参考下2015-06-06
下面小编就为大家带来一篇浅谈angularJS中的事件。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
Angular 2+ 支持使用 [innerHTML] 属性绑定来渲染 HTML,如果你使用插值,它会被视为字符串,本文将介绍如何使用 [innerHTML] 以及一些注意事项,需要的朋友可以参考下2024-02-02
解决angularjs service中依赖注入$scope报错的问题
今天小编就为大家分享一篇解决angularjs service中依赖注入$scope报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
这篇文章主要为大家介绍了angularjs实现多选框分段全选效果实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
最新评论