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的原創文章，盡在："汪子熙":