乐趣区

关于angular:Angular-Inject-注解的实际应用例子和工作原理浅析

jiezi

看一个理论的例子：

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 作为参数的类型，例如上面的代码将不会工作：

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) {}}
退出移动版