Angular 2 Decorators - 3

在 Angular 2 Decorators part -1 和 part -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']), 
        __metadata('design:type', Function),  // 標識onClick類型
        __metadata('design:paramtypes', [Object]),  // 標識onClick參數類型
        __metadata('design:returntype', void 0) // 標識返回值類型
    ], AppComponent.prototype, "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 依賴注入神祕的面紗。