Что именно делает @Component decorator?

Question

Из официальных документов мы знаем, что

Декоратор компонента позволяет пометить класс как угловой компонент и предоставить дополнительные метаданные, которые определяют, как компонент должен обрабатываться, создаваться и использоваться во время выполнения.

Но я бы хотел глубже понять, что на самом деле делает Компонентный декоратор, кроме предоставления дополнительных метаданных.

Я погрузился в исходный код и обнаружил, что все декораторы создаются с помощью функции makeDecorator. И тут я заблудился. В чем разница, например, для декораторов Component и ngModule? Они делают то же самое? Не думай так.

Как ответ, было бы здорово иметь пошаговое описание того, что я должен сделать, чтобы воссоздать Component Decorator без функции makeDecorator.

UPD: и, да, конечно, я знаю, как работают декораторы TypeScript.

Answer 1

Но я бы хотел глубже понять, что на самом деле делает Компонентный декоратор, кроме предоставления дополнительных метаданных.

Почему это должно быть что-то еще? Говорят, что аргумент передан @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 решает, что делать с метаданными, а не с функцией декоратора.

---

_{1 - См. Документацию TypeScript по декораторам}