Angular @Inject 注解的实际应用例子和工作原理浅析

看一个实际的例子：

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

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

此时，@Inject 是指定此查找标记的手动方式，后跟小写的 http 参数告诉 Angular 分配它的对象。

当组件或服务需要大量依赖项时，这可能（并且将会）变得非常混乱。 由于 Angular 支持从发出的元数据中解析依赖关系，因此大多数时候不需要使用 @Inject。

我们唯一需要使用 @Inject 的地方是像 OpaqueToken 这样的场景——它创建一个唯一的空白令牌，用作依赖注入提供程序。

我们使用@Inject 的原因是因为我们不能使用 OpaqueToken 作为参数的类型，例如下面的代码将不会工作：

const myToken = new OpaqueToken('myValue');

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

在这里，myToken 不是类型，它是一个值——这意味着 TypeScript 无法编译它。 但是，当我们将 @Inject 与 OpaqueToken 一起引入时，整个依赖注入会重新开始工作：

const myToken = new OpaqueToken('myValue');

@Component(...)
class ExampleComponent {
  constructor(@Inject(myToken) private token) {
    // use the provider for `token`
  }
}

上面提供了一个使用 @Inject 手动指定要注入的令牌的示例，并显示该令牌可以是任何值。 这意味着在 Angular 依赖注入的场景里，我们并不限于 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 中简化为：

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) { }
}