web-dev-qa-db-ja.com

補間とプロパティバインディングの違い

imageUrlプロパティを定義するコンポーネントがあり、テンプレートでこのプロパティを使用して画像のURLを設定します。補間とプロパティバインディングを使用してこれを試しましたが、どちらも機能しますが、2つの違い、またはどちらをいつ使用するかがわかりません。誰かが違いを知っていますか？

<img [src]='imageUrl' >

<img src= {{ imageUrl }} >
javascriptangularproperty-binding
17
Konst

Angularは、すべての式を中括弧で囲んで評価し、式の結果を文字列に変換し、それらを隣接するリテラル文字列と連結します。最後に、この複合補間結果を要素またはディレクティブ/コンポーネントプロパティに割り当てます。 --from https://angular.io/docs/ts/latest/guide/template-syntax.html#!#interpolation

プロパティバインディングは、式の結果を文字列に変換しません。

したがって、文字列以外のものをディレクティブ/コンポーネントプロパティにバインドする必要がある場合は、プロパティバインディングを使用する必要があります。

27
Mark Rajcok

補間では、{{式}}を使用して、バインドされた値をコンポーネントのテンプレートにレンダリングします。補間は、Angularがプロパティバインディングに変換される特別な構文です

プロパティバインディングは[]を使用して、コンポーネントからテンプレートに値を送信します。プロパティバインディング：要素プロパティを文字列以外のデータ値に設定するには、プロパティバインディングを使用する必要があります

例：

ブールプロパティisDisabledにバインドして、ボタンを無効にします。

<button [disabled]='isDisabled'>Try Me</button>

プロパティバインディングの代わりに補間を行うと、isDisabledクラスのプロパティ値がtrueまたはfalseに関係なく、ボタンは常に無効になります。

<button disabled='{{isDisabled}}'>Try Me</button>

角括弧の代替構文である正規形式。

 <button bind-disabled='isDisabled'>Try Me</button>
6
Raja Rama Mohan Thavalam