inject 函式只能用於構造器階段，這意味著其只能在構造器函式作用域（constructor function scope）和欄位初始化器（field initializers）中使用。

下列程式碼會遇到執行時錯誤(runtime error)：

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

因為使用到了 `inject` 函式的 fetchEntity 方法，在建構函式作用域之外的上下文裡被呼叫，不符合 inject 函式的使用前提。

當在建構函式階段之外呼叫 refreshEntity 方法時，上面的程式碼將引發執行時錯誤，例如在單擊按鈕時，因為 fetchEntity 使用了 inject()。 當用於初始化 entity$ 屬性時，它不會丟擲此錯誤，因為它處於建構函式階段。

解決方案也不難，使用 JavaScript 的 [closure](https://codereacter.medium.com/why-angular-14s-new-inject-function-is-so-amazing-ac281e7148d1) 閉包概念：

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

在上面的例子中，因為我們使用了一個閉包，所以我們能夠將注入的 HttpClient 和 ActivatedRoute 儲存在閉包範圍內，並且仍然使用返回函式中的值。因此，我們可以在建構函式階段之外利用 inject() 函式。

正如我們在上面的示例中已經看到的那樣，使用 inject 函式能夠保持元件符合單一職責的設計準則（single responsibility）和無依賴注入。
 
依賴注入或 DI 是 Angular 中的基本概念之一。 DI 被連線到 Angular 框架中，並允許具有 Angular 裝飾器的類（例如元件、指令、管道和可注入）配置它們需要的依賴項。

DI 系統中存在兩個主要角色：依賴消費者和依賴提供者。

我們不再直接在元件建構函式中依賴 HttpClient 或 ActivatedRoute。 相反，我們建立了一個可注入的函式來處理業務邏輯，這種思路類似於我們如何將邏輯提取到一個 Facade 服務中。並且 Angular 的最佳事件認為，Component 需要完成的業務邏輯最好都封裝到一個專門的 Facade 服務中。
使用 inject() 函式，我們不再需要元件中的任何依賴項。

Angular 14 inject 函式使用過程中的一些注意事項

相關文章