概要
Angularではコンポーネント→ビュー方向のバインディングは以下の4種類があります。
これらの違いと使い分けを説明します。
環境
- Angular v5.2.9
- angular-cli v1.7.3
属性(Attribute)とプロパティ(Property)の違いについて
そもそもこの2つについて理解していないといけません。
日本語だとどちらも属性で分かりにくいのですが、少し分かりやすく言うと
- HTML attribute
- DOM property
の違いです。詳細な説明はこちらのブログが分かりやすいです。
HTML attribute と DOM property - Please Sleep
このAttributeとPropertyは一致するものもあればしないものもあります。
Angularのドキュメントにも以下のように書かれています。
- A few HTML attributes have 1:1 mapping to properties. id is one example.
- Some HTML attributes don't have corresponding properties. colspan is one example.
- Some DOM properties don't have corresponding attributes. textContent is one example.
- Many HTML attributes appear to map to properties ... but not in the way you might think!
なのでこれを理解した前提でないと期待する挙動にならないケースがあるので注意してください。
説明
プロパティバインディング
Angularで一番よく使われるバインディングです。
基本的にこれを使います。
<img [src]="ImageUrl">
と書いた場合、src
プロパティにコンポーネント側のImageUrl
の値をバインドします。
属性バインディング
先の説明であったように、AttributeとPropertyは一致するものもあればしないものもあります。
例えばcolspan
はDOM Propertyには存在しないため、HTML Attributeとしてバインドする必要があります。以下の通りにattr.xxx
とします。
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
クラスバインディング
<!-- toggle the "special" class on/off with a property --> <div [class.special]="isSpecial">The class binding is special</div> <!-- binding to `class.special` trumps the class attribute --> <div class="special" [class.special]="!isSpecial">This one is not so special</div>
こんな感じでclassを変更することが出来ます。
ただいじる値が複数ある場合はNgClass
ディレクティブの方が推奨されています。
スタイルバインディング
<button [style.color]="isSpecial ? 'red': 'green'">Red</button> <button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
こんな感じにstyle.xxx
というフォーマットでstyleをいじれます。
ただいじる値が複数ある場合はNgStyle
ディレクティブの方が推奨されています。
使い分け
プロパティバインディングと属性バインディングの使い分け
基本的にプロパティバインディングを使用します。もしPropertyがない場合は属性バインディングを使います。
例えば
<input id="the-input" type="text" value="Name:">
とある時に、valueにJohn
という名前を入れたとして、各メソッドやフィールドの値は以下のようになります。
theInput.value // returns "John" theInput.getAttribute('value') // returns "Name:" theInput.defaultValue // returns "Name:"
このように属性は初期値、プロパティは現在値を返すため、属性バインディングを使うと期待する挙動にならないケースがあります。
クラスバインディングとスタイルバインディングの使い分け
基本的にクラスバインディングを使います。
なぜならスタイルバインディングはテンプレート・コンポーネントの方にスタイル情報が入って良くないためです。
出来る限りstyleはCSSの方でまとめていた方が保守しやすいです。
ただAtomicデザインなどで、atomのstyleを弄りたい、みたいなケースではスタイルバインディングが有用なケースも多々あります。
まとめ
Angularのコンポーネント→ビューでは以下の4つのバインド方法があり、
プロパティバインディング、クラスバインディングを優先的に使用してください。