在试用Angular进行开发的时候，我们很多时间都是在设计Component、Module。在定义一个Component的时候我们使用的是@Component进行注解声明的，如下代码：

@Component({
    selector: "my-app",
    template: "<div></div>"
})
export class AppComponent {}

这里以@开始的语句和java中的注解的使用方式和作用都非常的类似。@Component的作用就是把相应的元数据添加到AppComponent中去。那么Angular里的注解是怎么实现的呢？

TypeScript中的装饰器

要知道Angular中注解实现的原理，首先就必须分析TypeScript中装饰器的原理，下面的代码就实现了一个简单的装饰器：

function f() {  //当调用C类method方法时其执行顺序是
    console.log("f(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("f(): called");
    }
}

function g() {
    console.log("g(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("g(): called");
    }
}

class C {
    @f()
    @g()
    method() { }
}

这段代码在调用C类的method方法的时候，输出的结果为：

f(): evaluated
g(): evaluated
g(): called
f(): called

其中f，g函数为装饰器工厂，他们主要作用是根据参数生成特定的装饰器（示例中没有参数，返回的也是特定的装饰器）。f，g函数内部定义的就是具体的装饰器方法，在这些方法中就可以对目标进行各种操作了。

Angular注解的原理

我们选用Component来分析Angular注解的原理，其它类如：Module，Input也都是类似的。
首先我们找到Component注解的实现的源码：

export const Component: ComponentDecorator = <ComponentDecorator>makeDecorator(
    'Component', {
      selector: undefined,
      inputs: undefined,
      outputs: undefined,
      host: undefined,
      exportAs: undefined,
      moduleId: undefined,
      providers: undefined,
      viewProviders: undefined,
      changeDetection: ChangeDetectionStrategy.Default,
      queries: undefined,
      templateUrl: undefined,
      template: undefined,
      styleUrls: undefined,
      styles: undefined,
      animations: undefined,
      encapsulation: undefined,
      interpolation: undefined,
      entryComponents: undefined
    },
    Directive);

makeDecorator的源码精简后如下：

export function makeDecorator(
    name: string, props: {[name: string]: any}, parentClass?: any,
    chainFn: (fn: Function) => void = null): (...args: any[]) => (cls: any) => any {

    // ...

    function DecoratorFactory(objOrType: any): (cls: any) => any {

        // ...

        const TypeDecorator: TypeDecorator = <TypeDecorator>function TypeDecorator(cls: Type<any>) {

            // ...

        };

        // ...

       return TypeDecorator;
    }

    // ...

    return DecoratorFactory;
}

从代码我们可以发现makeDecorator返回的是一个装饰器工厂，这个装饰器工厂会返回一个装饰器TypeDecorator，从而可以知道TypeDecorator中干的就是实现注解的工作：把元数据写入Component修饰的类中去（比如：AppComponent类）。
接下来我们进一步分析TypeDecorator的代码：

const TypeDecorator: TypeDecorator = <TypeDecorator>function TypeDecorator(cls: Type<any>) {
  const annotations = Reflect.getOwnMetadata('annotations', cls) || [];
  annotations.push(annotationInstance);
  Reflect.defineMetadata('annotations', annotations, cls);
  return cls;
};

这里试用到了一个第三方的库Reflect，其具体作用就是操作目标类上的元数据。TypeDecorator方法内容非常的简单，把@Component传入的参数作为元数据添加到目标类中去。
最后我们可以总结整个注解的实现过程：
1、试用makeDecorator生成装饰器工厂。
2、目标类中使用装饰器工厂，并传入相应的参数。
3、自动调用装饰器方法，把对应的元数据写入annotations属性中去。

动态修改注解

根据源码我们可以知道注解的元数据都是存放在annotations属性中的，我们可以动态的获取并修改他们。具体事例如下：

@Component({
    selector: "my-app",
    template: "<div></div>"
})
export class AppComponent {}

const annotations = Reflect.getOwnMetadata('annotations', AppComponent);
annotations[0].template = "<div>This is test!</div>"

这段代码就可以修改AppComponent中的template元数据的内容，达到动态修改的效果。但是要注意任何元数据的修改，改变的只是元数据本身，任何以元数据为基础产生的内容不会修改，比如事例中的代码如果在AppComponent实例化后的页面内容是没有作用的。这种动态修改的Component只能影响修改后动态创建的组件。