@Component装饰器到底做了什么？

Question

从official docs我们知道

组件装饰让你标记一个类为角分量并提供确定组件应该如何处理，实例化，并在运行时使用额外的元数据。

但我想更深入和了解组件装饰确实除了提供额外的元数据。

我跳入源代码，发现所有装饰器都是在makeDecorator函数的帮助下创建的。在这里我迷路了。例如，Component和ngModule装饰器的区别在哪里？他们做同样的事情吗？不要这样想。

就像一个答案，它将是非常好的一步一步描述我应该做什么来重新创建没有makeDecorator函数的组件装饰。

UPD：是的，当然，我知道TypeScript装饰器是如何工作的。

Answer 1

但我想深入了解Component Decorator的真正用途，除了提供额外的元数据。

为什么它需要更多？据说传递给装饰器功能@Component的参数是元件元数据。所以这是提供元数据的主要责任。

最简单的方法，如果你想重现类似的东西是

1. 安装reflect-metadata。

   npm install --save reflect-metadata 
   

2. 创建装饰功能

   import 'reflect-metadata'; 
   
   interface MyComponentMetadata { 
       template?: string; 
       selector?: string; 
   } 
   
   function MyComponent(metadata: MyComponentMetadata) { 
       return function(ctor: Function) { 
       // add metadata to constructor 
       Reflect.defineMetadata('annotations', metadata, ctor); 
       } 
   } 
   

3. 使用它

   @MyComponent({ 
       selector: 'component', 
       template: '<hello></hello>' 
   }) 
   class HelloComponent { 
   } 
   

4. 现在，当你需要得到的元数据，只是做

   let metadata = Reflect.getMetadata('annotations', HelloComponent); 
   

元数据的目的是为Angular提供信息，以便知道该如何处理该类。所以装饰器并不仅仅是一个元数据提供者。 Angular决定如何处理元数据，而不是装饰器功能。

---

_{- 参见TypeScript documentation on decorators}