Question

来自official docs我们知道

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

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

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

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

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

Answer 1

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

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

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

安装reflect-metadata。
```
npm install --save reflect-metadata
```

创建装饰器功能¹

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);
  }
}

使用

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

现在，当您需要获取元数据时，只需执行

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

元数据的目的是为Angular提供有关如何处理该类的信息。因此，装饰者并不仅仅需要成为元数据提供者。 Angular决定如何处理元数据，而不是装饰器功能。

_{1 - 请参阅TypeScript documentation on decorators}

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

1 个答案: