這個例子的完整原始碼：

```typescript
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 引數：

![](https://img-blog.csdnimg.cn/img_convert/d119e5fd946754f4335e154eaf6462b8.png)

![](https://img-blog.csdnimg.cn/img_convert/fab578d400d285fefcafc7a98067bb5a.png)

NeedsService 的依賴服務是 UsefulService，維護在 deps 陣列裡：

![](https://img-blog.csdnimg.cn/img_convert/a5d2b33ff4192b1014f0c2738fd9638b.png)

觀察最後返回的 injector 例項裡，到底包含了哪些資料：
![](https://img-blog.csdnimg.cn/img_convert/7e20f7846ff01468aeffd6a5289df1b4.png)

injector records 屬性包含了 Providers NeedsService 和 UsefulService 兩條記錄，但是 value 為空，因為是惰性載入。
![](https://img-blog.csdnimg.cn/img_convert/cbdebfd2401e03bf2bc16d3c347e93b8.png)

直到應用程式碼顯式呼叫 injector.get 獲取 providers 例項時，hydration 才會發生：

![](https://img-blog.csdnimg.cn/img_convert/67f46e2f6ce0b224c685c2b63ee49ee7.png)

![](https://img-blog.csdnimg.cn/img_convert/fd158d601bcff1b99d0fd50ddb21e3af.png)

![](https://img-blog.csdnimg.cn/img_convert/08837028250d2b8046f14df6a0a7e94f.png)

本文全部原始碼可以在這個 [commit](https://github.com/wangzixi-diablo/angular-sandbox/commit/fdb09bc01f4e0e5e7e906901c36431720ad33111) 裡找到。

Angular 使用 Injector API 人工獲取依賴注入的例項

相關文章