Angular2のデータバインディングの概要

Angular2のコンポーネントとテンプレート間でデータをやり取りするバインディングの形式についてまとめました。
※Angular2のβ版、TypeScriptを使って確認したものです。

1)1Way(データの流れ:データソース(コンポーネント)→ビュー(DOM))


 
①内挿(interpolation)
{{value}}
※内挿(interpolation)の詳細はこちら
 
②プロパティバインディング
[property] = “value”
・DOM要素のプロパティをセットする。
例)
<img [src] = “heroImageUrl”>
img要素のsrc属性にコンポーネントの属性の値をセット
 
③アトリビュートバインディング
[attr.アトリビュート名] = “value”
・aria、svg、tableのspanアトリビュートなど、対応する要素プロパティがない場合に使用する。
例)
<tr><td [attr.colspan] = “1 + 1″>One-Two</td></tr>
 
④クラスバインディング
[class] = “expr”
・要素のclass属性からCSSクラス名を追加したり、除去したりできる。
 
⑤スタイルバインディング
[style.style-property] = “expr”
・インラインスタイルを設定できる。
 

2)1Way(データの流れ:ビュー(DOM)→データソース(コンポーネント))


 
●イベントバインディング
(event) = “handler”
例)
<div (click)=”selectHero(hero)></div>
ユーザーのクリックイベントでコンポーネントの”selectHero”メソッドをコール
 

3)2wayデータバインディング(データの流れ:データソース(コンポーネント)←→ビュー(DOM))


 
●NgModelビルトインディレクティブ
[(ngModel)] = “proverty”
・書式は”[..]”のプロパティバインディングと”(..)”のイベントバインディングを合わせた形。
例)
<input [(ngModel)]=”hero.name”>
・プロパティバインディングでコンポーネントからデータがセット。
・ユーザーのインプットボックス入力はイベントバインディングでコンポーネントに最新の値が再設定
 
※2wayデータバインディングの詳細はこちら

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です