Angular设计模式hierarchical injector实现代码复用模块化

 更新时间:2023年10月29日 14:50:38   作者:JerryWang_汪子熙  
这篇文章主要为大家介绍了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的资料请关注脚本之家其它相关文章!

相关文章

  • AngularJS日期格式化常见操作实例分析

    AngularJS日期格式化常见操作实例分析

    这篇文章主要介绍了AngularJS日期格式化常见操作,结合实例形式分析了AngularJS日期格式化常用参数功能、设置与使用技巧,需要的朋友可以参考下
    2018-05-05
  • Angularjs实现上传图片预览功能

    Angularjs实现上传图片预览功能

    本文通过实例代码给大家介绍了Angularjs实现上传图片预览功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-09-09
  • 详解基于Angular4+ server render(服务端渲染)开发教程

    详解基于Angular4+ server render(服务端渲染)开发教程

    本篇文章主要介绍了详解基于Angular4+ server render(服务端渲染)开发教程 ,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • 解决angular2 获取到的数据无法实时更新的问题

    解决angular2 获取到的数据无法实时更新的问题

    今天小编就为大家分享一篇解决angular2 获取到的数据无法实时更新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Angularjs中UI Router全攻略

    Angularjs中UI Router全攻略

    这篇文章主要介绍了Angularjs中UI Router全攻略,涉及到angularjs ui router的基本用法,需要的朋友参考下吧
    2016-01-01
  • 整理AngularJS中的一些常用指令

    整理AngularJS中的一些常用指令

    这篇文章主要介绍了整理AngularJS中的一些常用指令,包括ng-app、ng-init、ng-model和ng-repeat这四个指令的讲解,需要的朋友可以参考下
    2015-06-06
  • 解决AngualrJS页面刷新导致异常显示问题

    解决AngualrJS页面刷新导致异常显示问题

    本篇文章主要介绍了解决AngualrJS页面刷新导致异常显示问题的方法。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • AngularJS实现页面定时刷新

    AngularJS实现页面定时刷新

    本篇文章主要介绍了AngularJS实现页面定时刷新,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 在 Angular 中使用懒加载路由的方法

    在 Angular 中使用懒加载路由的方法

    延迟加载是一种限制加载用户当前需要的模块的方法,这可以提高应用程序的性能并减小初始捆绑包大小,在本文中,您学习了如何在 Angular 应用程序中使用惰性加载路由,本文分步骤讲解的非常详细,感兴趣的朋友一起看看吧
    2024-02-02
  • Angular Cookie 读写操作代码

    Angular Cookie 读写操作代码

    这篇文章主要介绍了Angular Cookie 读写操作代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,感兴趣的朋友跟随小编一起看看吧
    2022-01-01

最新评论