AngularJs 2のAppComponentと@Componentの間の接続は何ですか？例で

Question

ファイル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のテンプレートに示されています。それで、それが可能であることを知りたいですか？

Answer 1

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

template: '...'の式は、適用されるクラスの範囲で評価されます。 titleは、AppComponentのtitleフィールドを指します。

Answer 2

Günterはデコレータだと言いました。さらに、デコレータは、Reflect.defineMetadataを使用してリフレクトメタデータlbraryで関連するクラスにいくつかのメタデータを自動的に設定することもあります。メタデータは、（ComponentMetadata型の）デコレータのパラメータとして設定したものに対応します。

コンポーネントを使用すると、Angular2はそのような注釈を探してコンポーネントの使用方法や構成方法を探します。