Angular 2 Quickstartでは、HeroDetailComponentクラスの@Input文の目的は何ですか？

Question

Angular 2 Quickstartチュートリアルのmultiple compenentsセクションでは、コンポーネントを以前のAppComponentから抽出して、再利用性とテストしやすさを向上させています。

live exampleを実行してください。

ユーザはHeroesのリストをクリックすることができ、詳細ビューがリストの下に表示されます。

成分：

1. AppComponent（英雄のリスト）
2. HeroDetailComponent（表示詳細主人公が選択されると）

ヒーロークラスをインポート両方とも：

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

AppComponentのテンプレートではheroが対象となりますoperty：

<my-hero-detail [hero]="selectedHero"></my-hero-detail>

selectedHeroソースプロパティがリストされてヒーローに一度ユーザーがクリックする設定されています。

これまでのところ、とても良いです。

が今、問題は、私はHeroDetailComponentクラスで@Inputの目的を理解していないよということです。

export class HeroDetailComponent { 
    @Input() 
    hero: Hero; 
} 

@Input()が省略された場合、heroプロパティが設定されることはありませんようです。 @Input()はどこからの不動産を取得するのですか？ディレクティブにターゲットプロパティがあるときに、このステートメントが必須で、自動的に呼び出されるのはなぜですか？

私には明らかではありませんが、私は大きな画像を見逃しているようです。

Answer 1

入力

<my-hero-detail [hero]="selectedHero"></my-hero-detail> 

線は、上記IはHeroDetailComponentによって実装されると仮定<my-hero-detail>成分の@Input() hero:heroに電流成分のselectedHeroを通過するの[hero]=の対応物である（リンクをチェックしませんでした） 。

Answer 2

@Inputは、デコレータです。これは、タイプスクリプトのものの詳細です。

活字体のドキュメントから：活字体とES6のクラスの導入に伴い

、今のクラスおよびクラスメンバーに注釈を付けるか、変更をサポートするために追加の機能を必要とする特定のシナリオが存在します。デコレータは、クラス宣言とメンバのアノテーションとメタプログラミング構文の両方を追加する方法を提供します。デコレータはJavaScriptの第1段階の提案であり、TypeScriptの実験的な機能として利用できます。

私はそれはおそらくあなたが目的を理解しましょうたとえばhere. のためにこのことについて公式ドキュメントを読んでお勧めします。

私が最も基本的な方法で理解しているように、decoratorをキーワードの横に、または次の行/行に入れると考えることができます。 decoratorは、このステートメントで以前に定義された関数を呼び出します。

これが役に立ちます。