Angular @Injectable 注解的工作原理浅析

简介: Angular @Injectable 注解的工作原理浅析

下面是 SAP 电商云 Spartacus UI 两个 Angular Service 类,都加上了 @Injectable 的注解,区别就在于是否具有输入参数 providedIn

@Injectable() 装饰器指定 Angular 可以在 DI 系统中使用这个类。这个注解的输入元数据,providedIn: ‘root’,意味着被注解的 Angular service 类,在整个应用程序中都是可见的。

当将服务(提供者)注入到我们的组件/服务中时,通过构造函数中的类型定义来指定我们需要的提供者。下面是一个例子:

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

这里的类型定义是 Http(注意大写的 H),Angular 会自动将其分配给 http。


对于 JavaScript 开发人员来说,上面的工作方式或许有些神奇。类型定义是特定于 TypeScript 的,所以我们编译的 JavaScript 代码理论上应该不知道在浏览器中运行它时我们的 http 参数是什么。


在我们的 tsconfig.json 文件中,我们将 emitDecoratorMetadata 设置为 true。 这会将有关参数类型的元数据发送到我们编译的 JavaScript 输出中的装饰器中。


让我们看看上面列举的 TypeScript 代码,实际上被编译成什么(为了清楚起见,我保留了 ES6 导入):

import { Component } from '@angular/core';
import { Http } from '@angular/http';
var ExampleComponent = (function() {
  function ExampleComponent(http) {
    this.http = http;
  }
  return ExampleComponent;
})();
ExampleComponent = __decorate(
  [
    Component({
      selector: 'example-component',
      template: '<div>I am a component</div>',
    }),
    __metadata('design:paramtypes', [Http]),
  ],
  ExampleComponent
);

从这里,我们可以看到编译后的代码,知道 http 就是 @angular/http 提供的 Http 服务 - 它被添加为我们的类的装饰器:

__metadata('design:paramtypes', [Http]);

所以本质上,@Component 装饰器被转换为普通的 ES5,并且一些额外的元数据通过 __decorate 赋值提供。 这反过来告诉 Angular 查找 Http 令牌并将其作为第一个参数提供给组件的构造函数 - 将其分配给 this.http

function ExampleComponent(http) {
  this.http = http;
}
相关文章
|
2月前
|
JavaScript 前端开发 编译器
Angular 中的结构指令运行时的工作原理
Angular 中的结构指令运行时的工作原理
|
2月前
|
JavaScript 前端开发 API
vue的双向绑定的原理,和angular的对比
vue的双向绑定的原理,和angular的对比
77 0
|
8月前
|
JSON 搜索推荐 数据格式
Angular SSR 应用中 serverApp-state script 的工作原理介绍
Angular SSR 应用中 serverApp-state script 的工作原理介绍
|
10月前
|
存储 JavaScript 容器
关于 Angular 注解 @Injectable() 使用的一些误区
关于 Angular 注解 @Injectable() 使用的一些误区
|
10月前
|
JavaScript
Angular @Inject 注解的实际应用例子和工作原理浅析
Angular @Inject 注解的实际应用例子和工作原理浅析
|
2月前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
|
2月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
|
2月前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
40 0
|
2月前
|
JavaScript 前端开发
Angular.js 应用中数据模式的删除操作实现
Angular.js 应用中数据模式的删除操作实现
|
2月前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍