Angular 使用 Injector API 人工获取依赖注入的实例

简介: Angular 使用 Injector API 人工获取依赖注入的实例

这个例子的完整源代码:

import { Component, OnInit, Injectable, Injector } from '@angular/core';
@Injectable()
class UsefulService {
    constructor(){
        console.log("Useful Service is created");
    }
}
@Injectable()
class NeedsService {
  constructor(public service: UsefulService) { 
      console.log("NeedsService is created");
  }
}
const injector = Injector.create({
  providers:
    [{ provide: NeedsService, deps: [UsefulService] }, { provide: UsefulService, deps: [] }]
});
console.log(' true or false?' , injector.get(NeedsService).service instanceof UsefulService);
@Component({
  selector: 'manual_di',
  template: '<p>Manual DI </p>'
})
export class ManualDIComponent implements OnInit {
  constructor() { 
  }
  ngOnInit(): void {
  }
}

单步调试

Injector.create

由实现源代码可见,Angular NgModule providers 元数据支持 name 参数:


image.png




NeedsService 的依赖服务是 UsefulService,维护在 deps 数组里:

image.png



观察最后返回的 injector 实例里,到底包含了哪些数据:



injector records 属性包含了 Providers NeedsService 和 UsefulService 两条记录,但是 value 为空,因为是惰性加载。



直到应用代码显式调用 injector.get 获取 providers 实例时,hydration 才会发生:






相关文章
|
6月前
|
JSON API 数据格式
您可以在钉钉开放平台的API文档中找到对应的API接口来创建审批实例
您可以在钉钉开放平台的API文档中找到对应的API接口来创建审批实例【1月更文挑战第20天】【1月更文挑战第96篇】
124 2
|
6月前
|
JSON API 数据格式
您可以在钉钉开放平台的API文档中找到对应的API接口来创建审批实例
您可以在钉钉开放平台的API文档中找到对应的API接口来创建审批实例【1月更文挑战第9天】【1月更文挑战第41篇】
166 2
|
6月前
|
API 网络安全
调用钉钉的API获取审批实例ID列表时返回的结果为
调用钉钉的API获取审批实例ID列表时返回的结果为【1月更文挑战第5天】【1月更文挑战第21篇】
108 1
|
1天前
|
测试技术 UED 开发者
“Angular高手必看:模块化与依赖注入的绝妙搭配,让你的代码瞬间高大上!”
【10月更文挑战第25天】本文以问答形式详细探讨了Angular框架中的模块化与依赖注入的高级特性。主要内容包括:Angular模块的基本概念和创建方法,依赖注入的实现方式,模块间依赖关系的处理,以及懒加载模块的使用。通过这些特性,可以提高代码的可维护性和复用性,优化大型Web应用的开发和性能。
7 2
|
2月前
|
JSON 搜索推荐 API
深入了解亚马逊商品详情API:功能、作用与实例
亚马逊商品详情API接口由官方提供,允许开发者通过程序调用获取商品详细信息,如标题、价格等,适用于电商数据分析、搜索及个性化推荐等场景。接口名称包括ItemLookup、GetMatchingProductForId等,支持HTTP POST/GET请求,需提供商品ID、API密钥及其他可选参数。返回数据格式通常为JSON或XML,涵盖商品详情、分类、品牌、价格、图片URL及用户评价等。该接口对数据收集、实时推荐、营销活动及数据分析至关重要,有助于提升电商平台的数据处理能力、用户体验及商家运营效率。使用时需注册亚马逊开发者账号并申请API访问权限,获取API密钥后按文档构建请求并处理响应数据。
|
4月前
|
前端开发 容器
前端框架与库 - Angular模块与依赖注入
【7月更文挑战第17天】探索Angular的模块化和依赖注入:模块用于组织组件、服务等,通过`@NgModule`声明。依赖注入简化类间依赖管理,但面临模块重复导入、服务作用域不当和依赖循环等问题。解决策略包括规划模块结构、正确设置服务作用域和使用工厂函数打破循环依赖。遵循最佳实践,构建高效、可维护的Angular应用。
63 17
|
4月前
|
设计模式 JavaScript 测试技术
Angular服务与依赖注入机制详解
【7月更文挑战第17天】Angular的服务与依赖注入机制为构建模块化、可维护和可扩展的应用程序提供了强大的支持。通过合理定义和使用服务,以及利用依赖注入来管理依赖关系,我们可以编写出更加清晰、可维护和可测试的代码。希望本文能帮助你更好地理解和应用Angular的服务与依赖注入机制。
|
5月前
|
人工智能 运维 Serverless
函数计算产品使用问题之启动的实例是否有调用api接口停止功能
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
6月前
|
定位技术 API
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
|
6月前
|
弹性计算 运维 Serverless
Serverless 应用引擎产品使用之在阿里函数计算中,使用阿里云API或SDK从函数计算调用ECS实例的服务如何解决
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
113 4