Angular 2
テンプレート
サーチ…
前書き
テンプレートはAngular 1のテンプレートと非常によく似ていますが、何が起こっているのかをより明確にするために構文上の変更が数多くあります。
角2のテンプレート
簡単なテンプレート
私たちの名前と好きなことを示す非常にシンプルなテンプレートから始めましょう：
<div>
Hello my name is {{name}} and I like {{thing}} quite a lot.
</div>
{}:レンダリング
値をレンダリングするには、標準の二重の構文を使用できます。
My name is {{name}}
これまでは「フィルタ」と呼ばれていたパイプは、文字列のローカライズや浮動小数点値の通貨表現への変換など、値を新しい値に変換します。
[]:バインディングのプロパティ
変数を解決してコンポーネントにバインドするには、[]構文を使用します。コンポーネントにthis.currentVolumeがある場合、これをコンポーネントに渡すと、値は同期したままになります：
<video-control [volume]="currentVolume"></video-control>
(): HANDLING EVENTS
():イベントの処理コンポーネント上のイベントをリッスンするには、（）構文を使用します
<my-component (click)="onClick($event)"></my-component>
[()]: 2ウェイ・データ・バインディング
ユーザーの入力やその他のイベントを受けてバインディングを最新の状態に保つには、[（）]構文を使用します。それをイベントの処理とプロパティのバインディングの組み合わせと考えてください。
<input [（ngModel）] = "myName">コンポーネントのthis.myName値は入力値と同期したままになります。
* ：ASTERISK
このディレクティブはこのコンポーネントをテンプレートとして扱い、そのままでは描画しないことを示します。例えば、ngForは私たちをとり、アイテムの各アイテムについてスタンプアウトしますが、それはテンプレートなので、私たちのイニシャルをレンダリングしません：
<my-component *ngFor="#item of items">
</my-component>
レンダリングされたコンポーネントではなくテンプレートで動作するその他の同様のディレクティブは* ngIfと* ngSwitchです。