Angular 依赖注入框架里 useExisting 和 useClass 的使用场景

简介: Angular 依赖注入框架里 useExisting 和 useClass 的使用场景

image.png

从上图能看出,所有注入的示例都通过factory方法返回,只是factory方法的实现有所差异。


As we can see in the picture above all of providers can be presented similar useFactory. When it’s the time to get an instance of provider angular just calls factory function.


一些例子:


{provide: Class1, useClass: Class1}

1

等价于:


Class1

1

而:


{provide: Class1, useClass: Class3}

1

you can configure, that when a constructor requests Class1 Angular DI creates an instance of Class3 and passes it to the constructor.


当构造函数的参数需要传入Class1时,Angular DI传入一个Class3的框实例到构造函数里。


而下面这个例子:


{provide: Class2, useExisting: Class2}

1

doesn’t result in an instance being created, but you can see this rather than an alias. If a constructor requests Class2, Angular DI looks for another provider for key Class2 and injects the instance from this Class2 provider. You can see useExisting like a reference to another provider or an alias.


当构造函数需要Class2时,Angular DI从另一个key为Class2的provider里查找,取出对应的实例进行注入。


Injectable and Provider are 2 different things. The injectable is a class DI can create an instance of, or a provided value that might be passed to a constructor. A provider is an entry in a registry of providers that DI maintains and that allows to lookup up providers by key (key is the type of a constructor parameter, a string or an InjectToken). The provider also holds information about how to “create” the injectable value/instance. DI looks up a provider, the provider provides the value, and DI passes the value (instance of an injectable or a value provided as-is) to a constructor.


Injectable和Provider是两个不同的概念。Injectable是一个class,Angular DI可以基于该class创建实例,或者DI可以提供一个值,能够传递到constructor里。DI内部维护了一个provider注册表,该注册表支持根据key查询provider.


Key is the type of a constructor parameter, a string or an InjectToken)


key是构造函数的参数,一个字符串或者InjectToken. Provider有足够的knowledge知道如何去创建一个value或者实例。


DI询问provider,provider提供值,DI将值传递到构造函数里。


If you register MyClass as provider, this is the short form of { provide: MyClass, useClass: MyValue } where provide: MyClass is the key a provider can be found with, and useClass: MyValue is a strategy passed to the provider that informs the provider what value it should provide for this key.


provide: MyClass是provider的key,Angular DI注册表里根据这个key找到provider.


useClass: MyValue, 一个传递给provider的strategy,告诉provider对于指定的key,应该提供何种value.


useClass: MyValue相当于"use new MyClass(…)"


useExisting: Foo


DI需要去查找key为Foo的provider,然后注入Foo provider提供的value.


看一些具体的例子。


UseExisting

image.png

在注入ServiceOldS时,使用ServiceNewS这个provider提供的值。

因此,运行时,old和newService两个实例指向的都是newService实例,都是ServiceNewS这个provider注入的实例:

image.pngimage.pngimage.pngimage.pngThe provide property holds the token that serves as the key for both locating a dependency value and configuring the injector.

别名提供者:useExisting

useExisting 提供了一个键,让你可以把一个令牌映射成另一个令牌。实际上,第一个令牌就是第二个令牌所关联的服务的别名,这样就创建了访问同一个服务对象的两种途径。


{ provide: MinimalLogger, useExisting: LoggerService }

1

useExisting 的作用

你可以使用别名接口来窄化 API。下面的例子中使用别名就是为了这个目的。


想象 LoggerService 有个很大的 API 接口,远超过现有的三个方法和一个属性。你可能希望把 API 接口收窄到只有两个你确实需要的成员。在这个例子中,MinimalLogger类-接口,就这个 API 成功缩小到了只有两个成员:


// Class used as a "narrowing" interface that exposes a minimal logger

// Other members of the actual implementation are invisible

export abstract class MinimalLogger {

 abstract logs: string[];

 abstract logInfo: (msg: string) => void;

}

1

2

3

4

5

6

消费代码:


@Component({

 selector: 'app-hero-of-the-month',

 templateUrl: './hero-of-the-month.component.html',

 // TODO: move this aliasing, `useExisting` provider to the AppModule

 providers: [{ provide: MinimalLogger, useExisting: LoggerService }]

})

export class HeroOfTheMonthComponent {

 logs: string[] = [];

 constructor(logger: MinimalLogger) {

   logger.logInfo('starting up');

 }

}

1=


HeroOfTheMonthComponent 构造函数的 logger 参数是一个 MinimalLogger 类型,在支持 TypeScript 感知的编辑器里,只能看到它的两个成员 logs 和 logInfo:image.png


目录
相关文章
|
1天前
|
测试技术 UED 开发者
“Angular高手必看:模块化与依赖注入的绝妙搭配,让你的代码瞬间高大上!”
【10月更文挑战第25天】本文以问答形式详细探讨了Angular框架中的模块化与依赖注入的高级特性。主要内容包括:Angular模块的基本概念和创建方法,依赖注入的实现方式,模块间依赖关系的处理,以及懒加载模块的使用。通过这些特性,可以提高代码的可维护性和复用性,优化大型Web应用的开发和性能。
6 2
|
6天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
2月前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
67 4
|
3月前
|
缓存 监控 前端开发
WEB前端三大主流框架:React、Vue与Angular
在Web前端开发中,React、Vue和Angular被誉为三大主流框架。它们各自具有独特的特点和优势,为开发者提供了丰富的工具和抽象,使得构建复杂的Web应用变得更加容易。
195 6
|
3月前
|
Java 数据库连接 数据库
强强联手!JSF 与 Hibernate 打造高效数据访问层,让你的应用如虎添翼,性能飙升!
【8月更文挑战第31天】本文通过具体示例详细介绍了如何在 JavaServer Faces (JSF) 应用程序中集成 Hibernate,实现数据访问层的最佳实践。首先,创建一个 JSF 项目并在 Eclipse 中配置支持 JSF 的服务器版本。接着,添加 JSF 和 Hibernate 依赖,并配置数据库连接池和 Hibernate 配置文件。然后,定义实体类 `User` 和 DAO 类 `UserDAO` 处理数据库操作。
57 0
|
3月前
|
Java Spring
🔥JSF 与 Spring 强强联手:打造高效、灵活的 Web 应用新标杆!💪 你还不知道吗?
【8月更文挑战第31天】JavaServer Faces(JSF)与 Spring 框架是常用的 Java Web 技术。本文介绍如何整合两者,发挥各自优势,构建高效灵活的 Web 应用。首先通过 `web.xml` 和 `ContextLoaderListener` 配置 Spring 上下文,在 `applicationContext.xml` 定义 Bean。接着使用 `@Autowired` 将 Spring 管理的 Bean 注入到 JSF 管理的 Bean 中。
57 0
|
3月前
|
开发者 缓存 数据库
【性能奇迹】Wicket应用的极速重生:揭秘那些让开发者心跳加速的调优秘技!
【8月更文挑战第31天】在软件开发中,性能优化是确保应用快速响应和高效运行的关键。本书《性能调优:Apache Wicket应用的速度提升秘籍》详细介绍了如何优化Apache Wicket应用,包括代码优化、资源管理、数据库查询优化、缓存策略及服务器配置等方面。通过减少不必要的组件渲染、优化SQL查询、使用缓存和调整服务器设置等方法,本书帮助开发者显著提升Wicket应用的性能,确保其在高并发和数据密集型场景下的稳定性和响应速度。
41 0
|
3月前
|
JavaScript 前端开发 开发者
深入解析Angular装饰器:揭秘框架核心机制与应用——从基础用法到内部原理的全面教程
【8月更文挑战第31天】本文深入解析了Angular框架中的装饰器特性,包括其基本概念、使用方法及内部机制。装饰器作为TypeScript的关键特性,在Angular中用于定义组件、服务等。通过具体示例介绍了`@Component`和`@Injectable`装饰器的应用,展示了如何利用装饰器优化代码结构与依赖注入,帮助开发者构建高效、可维护的应用。
32 0
|
3月前
|
缓存 前端开发 JavaScript
Angular邂逅PWA:一场关于如何利用现代Web技术栈中的明星框架与渐进式理念,共同编织出具备原生应用般丝滑体验、离线访问及桌面集成能力的未来Web应用的探索之旅
【8月更文挑战第31天】本文详细介绍如何利用Angular将传统Web应用升级为渐进式Web应用(PWA),克服后者在网络依赖、设备集成及通知功能上的局限。通过具体命令行操作与代码示例,指导读者从新建Angular项目到配置`manifest.json`和服务工作进程,最终实现离线访问、主屏添加及推送通知等功能,显著提升用户体验。适合各水平开发者学习实践。
34 0
|
3月前
|
设计模式 JavaScript 前端开发
现代JavaScript框架比较:React、Vue和Angular
在现代Web开发中,JavaScript框架已成为开发高效、动态用户界面的关键工具。本文将深入比较三大主流框架:React、Vue和Angular。通过探讨它们的核心特性、优缺点和适用场景,帮助开发者根据项目需求选择最合适的框架。重点分析包括性能、学习曲线、社区支持和生态系统等方面,以便开发者能够做出明智的决策,优化开发流程并提升应用性能。