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

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

看一个实际的例子:

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) { }
}
相关文章
|
2月前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
43 0
|
2月前
|
JavaScript 前端开发
Angular.js 应用中数据模式的删除操作实现
Angular.js 应用中数据模式的删除操作实现
|
2月前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
|
27天前
|
JavaScript 前端开发 开发者
Angular框架:企业级Web应用的强大后盾
Angular,谷歌支持的JavaScript框架,因其组件化架构、双向数据绑定、依赖注入和路由系统,成为企业级Web开发首选。组件化促进代码重用,如`AppComponent`示例。双向数据绑定简化DOM操作,减少手动工作。依赖注入通过示例展示易管理依赖,提升测试性。路由则支持SPA开发,平滑页面过渡。Angular的特性增强了开发效率和应用质量,使其在Web开发领域保持领先地位。【6月更文挑战第25天】
28 2
|
2月前
|
前端开发 JavaScript 测试技术
使用Angular构建高效单页应用的实践指南
【5月更文挑战第21天】本文是使用Angular构建高效单页应用的实践指南,涵盖了Angular框架简介、SPA构建步骤和最佳实践。首先,Angular是基于TypeScript的前端框架,提供声明式模板、组件化和路由管理等功能。构建SPA包括环境搭建、创建组件、编写路由、数据绑定和交互,以及构建和部署。实践中,应遵循Angular风格指南,使用Angular Material UI库,实现服务端渲染,并进行性能优化和测试,以提升应用性能和用户体验。
|
2月前
|
JavaScript 前端开发
关于 Angular.js 应用里的 $scope.$apply()
关于 Angular.js 应用里的 $scope.$apply()
|
2月前
|
JavaScript 前端开发
Angular.js 应用里如何发送 HTTP 请求
Angular.js 应用里如何发送 HTTP 请求
|
2月前
|
JavaScript 前端开发 编译器
Angular 中的结构指令运行时的工作原理
Angular 中的结构指令运行时的工作原理
|
2月前
|
资源调度 JavaScript 编译器
显式指定 npm 作为创建 Angular 应用时的包管理器
显式指定 npm 作为创建 Angular 应用时的包管理器
|
2月前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript在Angular开发中的应用
【4月更文挑战第30天】本文探讨了TypeScript在Angular开发中的应用。Angular与TypeScript的结合利用了静态类型检查和ECMAScript特性,简化了大型Web应用的开发。文章涵盖组件、数据绑定、依赖注入、服务、守卫和路由以及模块化等方面,展示了如何在Angular中有效使用TypeScript。此外,还提到了TypeScript的高级应用,如泛型、高级类型和装饰器。掌握这些知识将有助于提升Angular应用的可维护性和可扩展性。