在開始本文的討論之前，讓我們先做一道多選題：

下面對於 `@Injectable` 的描述，哪些是正確的？

A @Injectable 裝飾器應該新增到每個服務中。
B @Injectable 裝飾器應該新增到任何使用依賴注入 (DI) 的服務中。
C 如果您不使用“providedIn”選項，則不需要新增 @Injectable 裝飾器。
D @Injectable 裝飾器與“providedIn”選項一起，意味著不應將服務新增到模組的提供者陣列中。

答案是 B 和 D.

Angular 帶有自己的 DI 框架，並用於 Angular 應用程式的設計以增強其模組化和效率。 @Injectable() 是任何 Angular 服務定義的重要組成部分。 有些人可能選擇錯誤答案的原因是他們錯誤地判斷了@Injectable 裝飾器和Angular 中的DI 之間的關係，不瞭解這個裝飾器的真正作用。

# Adding @Injectable Is Not Registering the Service

對於用於 DI 的控制反轉 (IOC) 容器，有兩個成對的知識點需要掌握。 首先是令牌。 要向 IOC 容器註冊某些服務，需要一個令牌。 令牌是註冊任何服務的唯一識別符號。 第二個知識點是 provider.

提供者幫助 DI 容器建立特定依賴項的例項。

在 Angular 中，使用令牌註冊服務並將其傳遞給提供者可以透過兩種不同的方式完成。

首先，可以使用特定的 @NgModule 註冊服務。 該過程是透過將服務傳遞給提供者陣列 `providers` 來進行註冊。在下面這個例子裡，使用的令牌是 typescript 型別 MyService。 這裡的提供者是 useClass。 這個提供者策略，通知 Angular 框架，可以透過 new 關鍵字來啟動某個依賴項的例項。

```typescript
@NgModule({
  ...
  providers: [
    // long hand syntax
  	{provide: MyService, useClass: MyService},
  	// short hand syntax
  	MyService
  ],
})
```

第二種方式是使用 `@Injectable`：

```typescript
@Injectable({
  providedIn: 'root'
})
export class MyService {

constructor() { }
}
```

這裡要注意區分的一點是，@Injectable 裝飾器與向容器註冊服務無關。 那麼@Injectable 裝飾器的目的是什麼？

事實上，MyService 可以有一些依賴項是標準的。 例如，您可以使用 HttpClient。

```typescript
import { HttpClient } from '@angular/common/http';

@Injectable()
export class MyService {

constructor(private httpClient: HttpClient) { }
}
```
讓我們嘗試瞭解當您需要獲取 MyService 例項時會發生什麼。 當 Angular 需要建立服務時，它應該傳遞一個 HttpClient 的例項。 那麼它怎麼能做到呢？

首先，Angular 應該知道提到了哪個依賴項。 還記得您使用令牌來註冊依賴項嗎？ 出於同樣的原因，您可以向 Angular 請求該依賴項的一個例項。 因此，Angular 將調查建構函式並檢視是否為令牌 HttpClient 請求了服務。 如果使用該令牌註冊了服務，Angular 可以使用該令牌啟動 MyService 並提供它建立的例項。

下面是編譯後的 JavaScript 程式碼：

```javascript 
var MyService = /** @class */ (function () {
    function MyService(httpClient) {
        this.httpClient = httpClient;
    }
    MyService = __decorate([
        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Injectable"])(),
        __metadata(
        	"design:paramtypes", 
        	[_angular_common_http__WEBPACK_IMPORTED_MODULE_1__["HttpClient"]]
        )
    ], MyService);
    return MyService;
}());
```

從編譯後的程式碼，分析 Angular @Injectable 的工作原理

相關文章