看一個實際的例子：

```typescript
import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';

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

此時，@Inject 是指定此查詢標記的手動方式，後跟小寫的 http 引數告訴 Angular 分配它的物件。

當元件或服務需要大量依賴項時，這可能（並且將會）變得非常混亂。 由於 Angular 支援從發出的後設資料中解析依賴關係，因此大多數時候不需要使用 @Inject。

我們唯一需要使用 @Inject 的地方是像 OpaqueToken 這樣的場景——它建立一個唯一的空白令牌，用作依賴注入提供程式。

我們使用@Inject 的原因是因為我們不能使用 OpaqueToken 作為引數的型別，例如下面的程式碼將不會工作：

```typescript
const myToken = new OpaqueToken('myValue');

@Component(...)
class ExampleComponent {
  constructor(private token: myToken) {}
}
```

在這裡，myToken 不是型別，它是一個值——這意味著 TypeScript 無法編譯它。 但是，當我們將 @Inject 與 OpaqueToken 一起引入時，整個依賴注入會重新開始工作：

```typescript
const myToken = new OpaqueToken('myValue');

@Component(...)
class ExampleComponent {
  constructor(@Inject(myToken) private token) {
    // use the provider for `token`
  }
}
```
上面提供了一個使用 @Inject 手動指定要注入的令牌的示例，並顯示該令牌可以是任何值。 這意味著在 Angular 依賴注入的場景裡，我們並不限於 TypeScript 歸類為“型別”的內容。

再看另一個例子：

```typescript
import { Component, Inject } from '@angular/core';
import { ChatWidget } from '../components/chat-widget';

@Component({
  selector: 'app-root',
  template: `Encryption: {{ encryption }}`
})
export class AppComponent {
  encryption = this.chatWidget.chatSocket.encryption;

constructor(@Inject(ChatWidget) private chatWidget) { }
}
```
在上面我們透過呼叫 `@Inject(ChatWidget)` 要求chatWidget 成為Angular 與類符號ChatWidget 相關聯的單例。 重要的是要注意，我們使用 ChatWidget 進行型別化並作為對其單例的引用。 我們沒有使用 ChatWidget 來例項化任何東西，Angular 在幕後為我們做這件事。

使用 TypeScript 時，`@Inject` 僅用於注入`原語(primitives)`。 TypeScript 的型別讓 Angular 在大多數情況下知道該做什麼。 上面的示例將在 TypeScript 中簡化為：

```typescript
import { Component } from '@angular/core';
import { ChatWidget } from '../components/chat-widget';

@Component({
  selector: 'app',
  template: `Encryption: {{ encryption }}`
})
export class App {
  encryption = this.chatWidget.chatSocket.encryption;

constructor(private chatWidget: ChatWidget) { }
}
```

Angular @Inject 註解的實際應用例子和工作原理淺析

相關文章