下面是 SAP 電商雲 Spartacus UI 兩個 Angular Service 類，都加上了 `@Injectable` 的註解，區別就在於是否具有輸入引數 `providedIn`：

![](https://img-blog.csdnimg.cn/img_convert/384408d196a4f5d97afbe5c7ea75e057.png)
![](https://img-blog.csdnimg.cn/img_convert/465e0ce65fe0c30334ddb26f5b1febda.png)

@Injectable() 裝飾器指定 Angular 可以在 DI 系統中使用這個類。 這個註解的輸入後設資料，providedIn: 'root'，意味著被註解的 Angular service 類，在整個應用程式中都是可見的。

當將服務（提供者）注入到我們的元件/服務中時，透過建構函式中的型別定義來指定我們需要的提供者。下面是一個例子：
```typescript
import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'example-component',
  template: '<div>I am a component</div>'
})
class ExampleComponent {
  constructor(private http: Http) {
    // use `this.http` which is the Http provider
  }
}
```

這裡的型別定義是 Http（注意大寫的 H），Angular 會自動將其分配給 http。

對於 JavaScript 開發人員來說，上面的工作方式或許有些神奇。型別定義是特定於 TypeScript 的，所以我們編譯的 JavaScript 程式碼理論上應該不知道在瀏覽器中執行它時我們的 http 引數是什麼。

在我們的 tsconfig.json 檔案中，我們將 emitDecoratorMetadata 設定為 true。 這會將有關引數型別的後設資料傳送到我們編譯的 JavaScript 輸出中的裝飾器中。

讓我們看看上面列舉的 TypeScript 程式碼，實際上被編譯成什麼（為了清楚起見，我保留了 ES6 匯入）：

```javascript
import { Component } from '@angular/core';
import { Http } from '@angular/http';

從這裡，我們可以看到編譯後的程式碼，知道 http 就是 @angular/http 提供的 Http 服務 - 它被新增為我們的類的裝飾器：

```javascript
__metadata('design:paramtypes', [Http]);
```

所以本質上，@Component 裝飾器被轉換為普通的 ES5，並且一些額外的後設資料透過 __decorate 賦值提供。 這反過來告訴 Angular 查詢 Http 令牌並將其作為第一個引數提供給元件的建構函式 - 將其分配給 this.http：

```javascript
function ExampleComponent(http) {
  this.http = http;
}
```

Angular @Injectable 註解的工作原理淺析

相關文章