Angular 2 Decorators - 3

Angular 2 Decorators part -1part -2 文章中,我们介绍了 Decorator 的分类和 Angular 2 常见的内置装饰器,并且我们深入分析了 ComponentDecorator 内部工作原理。此外,我们还发现在 TypeDecorator 类装饰器内部,使用了 Reflect 对象提供的 getOwnMetadata 和 defineMetadata 方法,实现 Metadata 信息的读取和保存。具体可参照下图:

Angular 2 Metadata 类型分为:

  • annotations

  • design:paramtypes

  • propMetadata

  • parameters

(备注:其中 design:paramtypes 和 parameters Metadata 类型是用于依赖注入)

接下来我们来看一下具体示例:

以上代码成功运行后,在浏览器控制台中,输入 window['__core-js_shared__'] 即可查看 AppComponent 相关连的 Metadata 信息:

示例代码

import { Component,Inject,ViewChild,HostListener,ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',template: `<h1 #greet> Hello {{ name }} </h1>`,})
export class AppComponent {
  name = 'Angular';

  @ViewChild('greet')
  private greetDiv: ElementRef;

  @HostListener('click',['$event'])
  onClick($event: any) {
    console.dir($event);
  }

  constructor(public appService: AppService,@Inject(CONFIG) config: any) {
  }
}

编译后的 ES 5 代码片段:

var __decorate = (this && this.__decorate) || function (decorators,target,key,desc) {...};
var __Metadata = (this && this.__Metadata) || function (k,v) {...};
var __param = (this && this.__param) || function (paramIndex,decorator) {...};
  
var AppComponent = (function () {
    // AppComponent构造函数
    function AppComponent(appService,config) {
        this.appService = appService;
        this.name = 'Angular';
    }
  
    AppComponent.prototype.onClick = function (event) {
        console.dir(event);
    };
  
    __decorate([
        core_1.ViewChild('greet'),__Metadata('design:type',core_1.ElementRef) // 标识greetDiv属性类型
    ],AppComponent.prototype,"greetDiv",void 0);
  
    __decorate([
        core_1.HostListener('click',['$event']),Function),// 标识onClick类型
        __Metadata('design:paramtypes',[Object]),// 标识onClick参数类型
        __Metadata('design:returntype',void 0) // 标识返回值类型
    ],"onClick",null);
  
    AppComponent = __decorate([
        core_1.Component({ // 调用ComponentDecoratorFactory返回TypeDecorator
            selector: 'my-app',template: "<h1 #greet> Hello {{ name }} </h1>",}),__param(1,core_1.Inject(config_1.CONFIG)),__Metadata('design:paramtypes',[app_service_1.AppService,Object])
    ],AppComponent);
    return AppComponent;
}());
exports.AppComponent = AppComponent;

总结

本文主要介绍了 angular 2 中 Metadata 分类,并通过一个实际的案例,阐述了 Angular 2 内部装饰器与 Metadata 之间的映射关系。window['__core-js_shared__'] 对象内保存的 Metadata 信息,是 Angular 2 依赖注入的基础,也为我们揭开了 Angular 2 依赖注入神秘的面纱。

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...