通过一个简单的例子学习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

相关文章
|
21天前
|
JavaScript 前端开发 编译器
Angular 中的结构指令运行时的工作原理
Angular 中的结构指令运行时的工作原理
23 4
|
8月前
|
前端开发 开发者 网络架构
Angular LOCATION_INITIALIZED Injection token 的作用介绍
Angular LOCATION_INITIALIZED Injection token 的作用介绍
32 0
|
21天前
|
JavaScript 前端开发 API
vue的双向绑定的原理,和angular的对比
vue的双向绑定的原理,和angular的对比
66 0
|
7月前
|
设计模式 JavaScript 测试技术
什么是 Angular 基于 Constructor Parameter 的 Dependency Injection
什么是 Angular 基于 Constructor Parameter 的 Dependency Injection
34 0
|
7月前
Angular 依赖注入系统里 Injection token PLATFORM_ID 的使用场景
Angular 依赖注入系统里 Injection token PLATFORM_ID 的使用场景
25 0
|
7月前
|
移动开发 网络架构 HTML5
Angular 依赖注入系统里 Injection token APP_BASE_HREF 的使用场景
Angular 依赖注入系统里 Injection token APP_BASE_HREF 的使用场景
39 0
|
7月前
|
JSON 搜索推荐 数据格式
Angular SSR 应用中 serverApp-state script 的工作原理介绍
Angular SSR 应用中 serverApp-state script 的工作原理介绍
34 0
|
8月前
|
存储 前端开发 API
Angular APP_INITIALIZER Injection Token 的使用方法介绍
Angular APP_INITIALIZER Injection Token 的使用方法介绍
24 0
|
21天前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
17 0
|
21天前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
36 2