一個常見的誤解是，`@Injectable()` 是我們計劃在應用程式中注入元件/服務的任何類的必需裝飾器。 這種說法並不完全正確。

當使用 Angular 裝飾器時，被裝飾的類以 Angular 可以讀取的格式儲存關於自身的後設資料——這包括關於它需要獲取和注入哪些依賴項的後設資料。

如果一個類上沒有使用 Angular 裝飾器，那麼 Angular 就無法讀取它需要的依賴項。 這就是我們需要使用@Injectable() 的原因。

如果我們的服務注入提供者，我們必須新增 @Injectable()，這個註解除了告訴 Angular 儲存它需要的後設資料之外，沒有實現其他額外的功能。

假設我們有下面這個 Service class：

```typescript
export class UserService {
  isAuthenticated(): boolean {
    return true;
  }
}
```

對於上面這個類，我們不需要用 `@Injectable`裝飾它，以便能夠將其注入到元件中。因為 UserService 本身不注入任何 providers.

然而如果我們的 Service 類本身又注入了其他的依賴：

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

export class UserService {
  constructor(private http: Http) {}
  isAuthenticated(): Observable<boolean> {
    return this.http.get('/api/user').map((res) => res.json());
  }
}
```
上面的程式碼無法正常工作，因為 Http 提供程式後設資料不會被儲存以供 Angular 正確組合。

解決方案就是使用 `@Injectable` 註解：

```typescript
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class UserService {
  constructor(private http: Http) {}
  isAuthenticated(): Observable<boolean> {
    return this.http.get('/api/user').map((res) => res.json());
  }
}
```

SAP Spartacus 的例子：

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

對於用於 DI 的控制反轉 (IOC) 容器，開發人員通常需要完成兩種設定。 首先是令牌。 要向 IOC 容器註冊依賴，需要提供一個令牌。 令牌是註冊任何服務的獨一無二的識別符號。 第二件事是配置 provider 本身。 提供者幫助 DI 容器建立特定依賴項的執行時例項。

在 Angular 中，使用令牌註冊服務，並將其傳遞給提供者的具體方法如下所述：

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

例子程式碼：

```typescript
@NgModule({
  ...
  providers: [
    // long hand syntax
  	{provide: MyService, useClass: MyService},
  	// short hand syntax
  	MyService
  ],
})
```
注意上面提供了兩種語法，因為 provide 和 useClass 指向的 type 定義相同，所以可以直接簡寫成 `MyService`.</boolean></boolean>

關於 Angular 註解 @Injectable() 使用的一些誤區

相關文章