乐趣区

关于angular: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 参数:

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

察看最初返回的 injector 实例里,到底蕴含了哪些数据:

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

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

本文全副源代码能够在这个 commit 里找到。

更多 Jerry 的原创文章,尽在:” 汪子熙 ”:

退出移动版