Angular 14 提供了一些非常有趣的特性：型別化表單（typed forms）、獨立元件(standalone components)，以及本文將要介紹的內容，即在所謂的構造器階段(constructor phase) 使用 [inject](https://codereacter.medium.com/why-angular-14s-new-inject-function-is-so-amazing-ac281e7148d1) 函式的能力。

# 什麼是 inject 函式

inject() 函式將 InjectionToken 作為引數，並從當前 active 的注入器返回該 InjectionToken 的值。 簡而言之，這是另一種不使用 constructor injection 而仍然能夠獲取依賴項的方法。

看個具體的例子：

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

# 什麼是 constructor phase

構造器階段意味著構造器函式作用域（ constructor function scope）和欄位初始化器（field initializers）。 這意味著不能在 `@Input()` 設定器或任何其他函式或生命週期掛鉤中呼叫 inject() 函式。

下圖 title setter 中檢視呼叫 inject 函式，會出現 Angular 編譯錯誤。
![](https://img-blog.csdnimg.cn/img_convert/0edb90950c9981dce8ad04ee1f0f3efb.png)

# 使用 inject 函式降低 Component 的複雜度

假設我們需要在元件中新增一個路由器路徑(router path)引數，以便從 API 獲取實體詳細資訊。

讓我們看看不使用 inject() 函式（或任何其他外觀服務即 facade service）的情況。

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

上面的例子是傳統的基於建構函式的注入實現方式，存在三個缺陷：

- 該 Component 依賴於 HttpClient（或執行 API 呼叫的其他外觀服務）。
- 該 Component 依賴於 ActivatedRoute。
- 在元件實現中有業務邏輯，它應該只負責顯示 UI，而不是擔心如何獲取資料。

使用 inject 函式，改進後的實現：

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

在上面的程式碼中，元件忽略了從伺服器獲取實體所需的內容。 它所知道的是它現在有一個名為 entity$ 的屬性，用於儲存 `Observable<entity>`。Component 現在根本不需要建構函式注入。這允許元件符合了設計的單一職責準則，而不是元件+資料聚合器。</entity>

Angular 14 新的 inject 函式介紹

相關文章