通过一个简单的例子学习Angular Injection Token工作原理

简介: 通过一个简单的例子学习Angular Injection Token工作原理

源代码:

const BASE_URL = new InjectionToken<string>('BaseUrl');
    const injector = Injector.create({providers:
      [{provide: BASE_URL, useValue: 'http://localhost'}]});
    const url = injector.get(BASE_URL);
    console.log('Jerry url: ' + url);

输出:

image.png

new InjectionToken传进来的字符串充当description,没有实际意义:

image.pngimage.png

调用Injector的static create方法:

image.png

useValue即我们期望这个token运行时使用的实际值:

image.pngimage.png

Injector传入一个injection token进去,会发生怎样的火花?

image.png

this.records是一个Map: Key为injection token,value为实际值:

image.png

注释写的很清楚,hydrate一个token的实例出来

image.png

image.png

大功告成:

image.png

相关文章
|
2月前
|
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 中。
37 0
|
5月前
|
JavaScript 前端开发 编译器
Angular 中的结构指令运行时的工作原理
Angular 中的结构指令运行时的工作原理
|
12月前
|
前端开发 开发者 网络架构
Angular LOCATION_INITIALIZED Injection token 的作用介绍
Angular LOCATION_INITIALIZED Injection token 的作用介绍
|
5月前
|
JavaScript 前端开发 API
vue的双向绑定的原理,和angular的对比
vue的双向绑定的原理,和angular的对比
97 0
|
11月前
|
设计模式 JavaScript 测试技术
什么是 Angular 基于 Constructor Parameter 的 Dependency Injection
什么是 Angular 基于 Constructor Parameter 的 Dependency Injection
|
11月前
Angular 依赖注入系统里 Injection token PLATFORM_ID 的使用场景
Angular 依赖注入系统里 Injection token PLATFORM_ID 的使用场景
|
11月前
|
移动开发 网络架构 HTML5
Angular 依赖注入系统里 Injection token APP_BASE_HREF 的使用场景
Angular 依赖注入系统里 Injection token APP_BASE_HREF 的使用场景
|
11月前
|
JSON 搜索推荐 数据格式
Angular SSR 应用中 serverApp-state script 的工作原理介绍
Angular SSR 应用中 serverApp-state script 的工作原理介绍
|
19天前
|
缓存 JavaScript 前端开发
Angular 应用打包和部署
Angular 应用打包和部署
55 1
|
2月前
|
应用服务中间件 Java Maven
掌控视图的力量!深入解析 JSF 视图管理,揭秘视图生命周期的秘密,让你的应用更高效!
【8月更文挑战第31天】JavaServer Faces (JSF) 是一种强大的框架,用于管理 Web 应用程序的视图。本文通过具体案例介绍 JSF 视图管理的基础知识,包括创建、管理和销毁视图的过程。首先,在 Eclipse 中创建一个新 JSF 项目,并配置 Maven 依赖。接着,在 `WEB-INF` 目录下配置 `web.xml` 文件,设置 JSF servlet。
36 0