看一个实际的例子: 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) { } } 在上面我们通过调用 使用 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) { } } |
|