TypeScript - AngularJs 2 における AppComponent と @Component の関係は何ですか？

例としての app.component.ts ファイル : https://angular.io/resources/live-examples/toh-1/ts/plnkr.html は以下の通りです :

import { Component } from '@angular/core';

export class Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  template:`
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

さて、AppComponentでtitleの値を設定し、それが@Componentのテンプレートに表示されます。では、これがどのように可能なのか知りたいですか？

回答 #1

`@Component()` はデコレーターであり、デコレーターの直後に続くクラス、メンバー、または変数に適用されます。そのため、`@Component()` デコレーターが `class AppComponent()` の直前にあるので、このクラスに適用されます。

template: ''...'' 内の式は、それが適用されるクラスのスコープ内で評価されます。したがって、title は AppComponent 内の title フィールドを指します。

回答 #2

ギュンターが言ったように、それはデコレーターです。さらに、デコレーターは Reflect.defineMetadata を使用して、関連するクラスに Reflect Metadata ライブラリでいくつかのメタデータを自動的に設定するという追加の機能があります。そのメタデータは、デコレーターのパラメータ（ComponentMetadata 型）として設定したものに対応します。

コンポーネントが使用されると、Angular2 はそのような注釈を探して、コンポーネントの使用方法や設定方法を見つけ出します。