为 Angular service 注册 provider 的三种方式

简介: 为 Angular service 注册 provider 的三种方式

对于要用到的任何服务(service),你必须至少注册一个提供者(provider)。服务可以在自己的元数据中把自己注册为提供者,这样可以让自己随处可用。或者,你也可以为特定的模块或组件注册提供者。


要注册提供者,就要在服务的 @Injectable() 装饰器中提供它的元数据,或者在 @NgModule() 或 @Component() 的元数据中。


换言之,Angular 提供三种方式的服务注册机制:


在服务自己实现代码里使用注解 @Injectable()

在 @NgModule() 里注册

在 @Component() 里注册

默认情况下,Angular CLI 的 ng generate service 命令会在 @Injectable() 装饰器中提供元数据来把它注册到根注入器中。


下图是一个例子:

image.png


当你在根一级提供服务时,Angular 会为 HeroService 创建一个单一的共享实例,并且把它注入到任何想要它的类中。这种在 @Injectable 元数据中注册提供者的方式还让 Angular 能够通过移除那些从未被用过的服务来优化大小, 即所谓的摇树优化 - tree shaking.


当你使用特定的 NgModule 注册提供者时,该服务的同一个实例将会对该 NgModule 中的所有组件可用。要想在这一层注册,请用 @NgModule() 装饰器中的 providers 属性:


例子:

image.png

当你在组件级注册提供者时,你会为该组件的每一个新实例提供该服务的一个新实例。 要在组件级注册,就要在 @Component() 元数据的 providers 属性中注册服务提供者。


例子:

image.png

相关文章
|
3月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
|
10月前
|
搜索推荐
Angular 依赖注入错误消息:ERROR Error NullInjectorError No provider for XX
Angular 依赖注入错误消息:ERROR Error NullInjectorError No provider for XX
|
3月前
|
缓存 前端开发 JavaScript
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
|
10月前
Angular 服务器端渲染的一个错误消息 - No provider for InjectionToken REQUEST
Angular 服务器端渲染的一个错误消息 - No provider for InjectionToken REQUEST
Angular 服务器端渲染的一个错误消息 - No provider for InjectionToken REQUEST
|
10月前
Angular 应用里 NullInjectorError - No provider for XX 错误的一个场景和分析过程
Angular 应用里 NullInjectorError - No provider for XX 错误的一个场景和分析过程
|
10月前
|
JavaScript
Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试
Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试
|
11月前
|
Web App开发 缓存 安全
Angular 应用要启用 Service Worker 所需满足的一些前提条件
Angular 应用要启用 Service Worker 所需满足的一些前提条件
|
11月前
|
缓存 API
Angular 里的 Service Worker
从 5.0.0 版本开始,Angular 附带了一个 Service Worker 实现。 Angular 开发人员可以利用这个 service worker 并从其提供的更高的可靠性和性能中受益,而无需针对低级 API 编写代码。
|
11月前
|
存储 JavaScript API
如何使用 Angular 服务器端渲染的 Transfer State Service
如何使用 Angular 服务器端渲染的 Transfer State Service
|
资源调度 前端开发 Java
使用Angular CDK实现一个Service弹出Toast组件
使用Angular CDK实现一个Service弹出Toast组件
112 0