web-dev-qa-db-ja.com

Angularプロパティバインディング

Angularには、プロパティをデータバインドするためのさまざまな方法があります。

<img src="{{ myProperty }}">
<img bind-src="myProperty ">
<img [src]="myProperty">

コンポーネントのプロパティをビューにバインドする正しい方法はありますか？これらの3つの方法の違いは何ですか？いつ、なぜ使用する必要があるのですか？

angulardata-binding
6
Vinicius Brasil

補間とプロパティバインディングは実質的に同じであり、bind-sr​​cは冗長で代替の方法にすぎず、あまり使用されません。

違い：

interpolation値をhtmlに「挿入」するので、value="{{ hello }}" Angularはinserting変数を角括弧の間に挿入します。

property bindingを使用すると、AngularでHTMLのelementsプロパティに直接アクセスできます。これはより深いアクセスです。 [value]="hello" Angularは要素の値プロパティを取得しており、変数をそのプロパティの値としてsetting設定しています。

event bindingを使用すると、クリックなどのイベントを使用して関数をトリガーできます。これらのバインディングでは、(click)="myFunction($event)"などの括弧を使用します。これにより、.tsファイルで定義されているmyFunction（）メソッドが呼び出されます。 「（クリック）」を囲む括弧は、関数をdomイベントにバインドします。$eventは、イベントオブジェクトを関数に渡すキーワードです。また、単一引用符付きの文字列、または補間付きの変数を渡すこともできます。

双方向（データ）バインディングを使用すると、イベントをプロパティバインディングと組み合わせることができます。例えば

<input [(ngModel)]="username">
<p>Hello {{username}}!</p>

入力を持ち、同時に値を表示することができます。詳細 ここ

最後に補間を使用する場合とデータバインディングを使用する場合。これは通常は形式です。通常、スマートコンポーネントとダム（プレゼンテーション）コンポーネントを使用する場合、読みやすさのためにプロパティバインディングを使用してhtmlにバインドします。その場合。あなたが単純な値を持っているなら、おそらく補間はあなたの友人です。それはすべて、読みやすさ、ベストプラクティス、および好みによって決まります。

15
FussinHussin

それらはすべて非常によく似ており、一方向のデータバインディングです。

Src = "{{myProperty}}"は常に文字列をレンダリングするため、少し異なると思います。したがって、intまたはbooleanが必要な場合、正しく機能しない可能性があります。

Angularjsでは、このタイプの構文バインディングが古いバージョンのIEとの互換性の問題を引き起こす可能性があることを知っています。 Angular 2+）でそれらが解決されたかどうかはわかりませんが、これがsrc = "{{myProperty}}"を回避できるもう1つの理由です

他の2つは同じです。コミュニティは好むようですが、それが好みです。

1
bgraham

プロパティバインディング を参照

および バインディングまたは補間

多くの場合、補間はプロパティバインディングの便利な代替手段です。

データ値を文字列としてレンダリングする場合、1つの形式を他の形式よりも優先する技術的な理由はありません。あなたは可読性に傾く、それは補間を支持する傾向がある。あなたはコーディングスタイルのルールを確立し、ルールに準拠し、目の前のタスクにとって最も自然に感じるフォームを選択することを提案します。

要素のプロパティを文字列以外のデータ値に設定する場合は、プロパティバインディングを使用する必要があります。

1
Moema