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

Question

从官方文档中我们知道

组件装饰器允许你将一个类标记为一个 Angular 组件，并提供额外的元数据来确定组件在运行时应该如何处理、实例化和使用。

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

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

就像一个答案一样，逐步描述我应该做什么来重新创建没有 makeDecorator 函数的组件装饰器会很棒。

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

score 10 · Accepted Answer

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

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

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

安装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 文档}

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

1 回答 1

Related

Reference