@Componentデコレータは何をしていますか？ <a href="https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html" rel="nofollow noreferrer">official docs</a>から

Question

は、我々は

コンポーネントデコレータを使用すると、角度成分としてクラスをマークし、コンポーネントは、処理されたインスタンス化および実行時に使用すべきかを決定する追加のメタデータを提供することを可能にすることを知っています。

しかし、私はより深く行くとコンポーネントデコレータが本当に追加のメタデータを提供する以外ないかを理解したいと思います。

私はソースコードに分割し、すべてのデコレータがmakeDecorator機能の助けを借りて作成されていることを発見しました。そしてここで私は迷ってしまった。 ComponentとngModuleデコレータの違いはどこですか？彼らは同じことをしていますか？そう思わないでください。

答えと同様に、makeDecorator関数を使用せずにComponent Decoratorを再作成するために何をすべきかを段階的に説明することは素晴らしいことです。

UPD：もちろん、私はTypeScript Decoratorの仕組みを知っています。

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は、デコレータ機能ではなく、メタデータの処理方法を決定します。

---

_{- FYI TypeScript documentation on decorators}