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

Question

从官方文档我们知道

组件装饰器允许您将类标记为Angular组件,并提供其他元数据,以确定如何在运行时处理,实例化和使用组件.

但我想更深入地了解组件装饰器除了提供额外的元数据之外真正做了什么.

我潜入了源代码,发现所有装饰器都是在makeDecorator函数的帮助下创建的.在这里,我迷路了.Component和ngModule装饰器的示例区别在哪里？他们做同样的事吗？不要这么认为.

就像一个答案一样,如果没有makeDecorator函数重新创建Component Decorator,我需要一步一步地描述我应该做些什么.

UPD:是的,当然,我知道TypeScript Decorators是如何工作的.

Answer 1

但我想更深入地了解组件装饰器除了提供额外的元数据之外真正做了什么.

为什么还需要更多？据说传递给@Component装饰器函数的参数是组件metatdata.因此,提供元数据是主要责任.

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

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决定如何处理元数据,而不是装饰器功能.

_{1 - 请参阅装饰器上的TypeScript文档}