Angularデータバインディングとその実装の詳細な説明

序文

Web 開発では、モデルとビュー間のデータ同期が必要です。これらのモデルには基本的にデータ値が含まれ、ビューはユーザーが見るものを処理します。したがって、これが Angular でどのように行われるのか疑問に思っている場合は、Angular データ バインディングに関するこの記事が役立ちます。

ここで議論されるトピックは以下の通りです。

• データ バインディングとは何ですか?
• Angular におけるデータバインディングの種類
• 一方向データバインディング補間プロパティバインディングイベントバインディング
• 双方向データバインディング

データバインディングとは何ですか?

データ バインディングは、アプリケーション UI またはユーザー インターフェイスをモデルにバインドするメカニズムです。データ バインディングを使用すると、ユーザーはブラウザーを使用して Web サイト上の要素を操作できるようになります。したがって、何らかの変数が変更されるたびに、その特定の変更がドキュメント オブジェクト モデル (DOM) に反映される必要があります。

Angular では、データ バインディングによってコンポーネントと DOM 間の相互作用が定義されます。データ バインディングは、AngularJS から最新の Angular 9 バージョンまで、すべての Angular バージョンの一部です。

Angular のデータバインディングの種類

Angular では、一方向と双方向の両方のデータ バインディングが可能です。一方向データ バインディングは、モデルを通じてビューを操作する単純なタイプのデータ バインディングです。つまり、Typescript コードに加えられた変更は、対応する HTML に反映されます。 Angular では、一方向のデータ バインディングは次のように実現されます。

• 補間または文字列補間
• プロパティバインディング
• イベントバインディング

一方、双方向データ バインディングでは、モデルを使用してビューを更新したり、ビューを使用してモデルを更新したりできるように、データを同期できます。つまり、アプリケーションはコンポーネント クラスとそのテンプレート間で情報を共有できるようになります。

一方向データバインディング

一方向データ バインディングでは、データはモデルからビューへの一方向にのみ流れます。前述したように、Angular の一方向データ バインディングには、補間、プロパティ バインディング、イベント バインディングの 3 つのタイプがあります。

補間バインディング

補間バインディングは、TypeScript コードから (つまり、コンポーネントからビューへ) HTML 出力を返すために使用されます。ここでは、テンプレート式は二重中括弧内に指定されています。補間を使用すると、HTML 要素タグ間および属性割り当て内のテキストに文字列を追加できます。これらの文字列はテンプレート式を使用して評価されます。

例：

<h1>{{タイトル}}</h1>
 
<b>{{course}} を学ぶ
</b> Edureka と。
 
2 * 2 = {{2 * 2}}
 
<div><img src="{{画像}}"></div>

このコードの Typescript 部分は次のとおりです。

クラスAppComponentをエクスポートします。
  title = 'データバインディング';
  コース = '角度';
  image = 'ここにURLを貼り付けます'
}

出力：

コンポーネント属性は 2 つの中括弧の間に指定されます。 Angular は、コンポーネント プロパティを、そのコンポーネント プロパティに関連付けられた文字列値に置き換えます。必要に応じてさまざまな場所で使用できます。 Angular は補間をプロパティ バインディングに変換します。

Angular では、補間区切り文字を構成して、2 つの中括弧を任意のものに置き換えることもできます。これは、コンポーネント メタデータの補間オプションを使用して実行できます。

テンプレート式

テンプレート式は 2 つの中括弧で囲まれ、値を生成します。 Angular は式を評価し、特定の式を HTML 要素、コンポーネント、ディレクティブなどのバインディング ターゲットのプロパティに割り当てます。

注: 補間括弧内の 2*2 はテンプレート式です。

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

プロパティ バインディングでは、値はコンポーネントのプロパティからターゲット要素のプロパティに流れます。したがって、プロパティ バインディングを使用して、ターゲット要素からデータを読み取ったり抽出したり、ターゲット要素に属するメソッドを呼び出したりすることはできません。要素によって発生したイベントは、この記事の後半で説明するイベント バインディングを通じて識別できます。

一般的に、プロパティ バインディングを使用して、コンポーネント プロパティ値を要素属性に設定すると言えます。

例：

<h1>プロパティバインディング</h1>
<div><img [src]="画像"></div>

上記の例では、image 要素の src 属性がコンポーネントの image プロパティにバインドされています。

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

気付いた方は、補間とプロパティ バインディングが同じ意味で使用されていることに気付くでしょう。以下の例のペアを見てみましょう。

<h2>補間</h2>
 
<div><img src="{{画像}}"></div>
 
<h2>プロパティバインディング</h2>
 
<div><img [src]="画像"></div>

要素属性を文字列以外のデータ値に設定する必要がある場合は、補間ではなく属性バインディングを使用する必要があることに注意してください。

イベントバインディング

イベント バインディング機能を使用すると、マウスの動き、キーの押下、クリックなどの特定のイベントをリッスンできます。 Angular では、等号 (=) の左側の通常の角括弧内にターゲット イベント名を指定し、閉じ引用符 ("") 内にテンプレート ステートメントを指定することで、イベント バインディングを実現できます。

例：

<div>
  <button (click)="goBack()">戻る</button>
</div>

上記の例では、「click」はターゲット イベントの名前であり、「goBack()」はテンプレートのステートメントです。

出力：

イベント バインディングが発生するたびに、Angular はターゲット イベントのイベント ハンドラーを設定します。特定のイベントが発生すると、テンプレート ステートメントがハンドラーによって実行されます。通常、レシーバーには、イベントに応答してアクションを実行するテンプレート ステートメントが含まれます。ここでは、バインディングはイベントに関する情報を伝えるために使用されます。これらの情報のデータ値には、イベント文字列、オブジェクトなどが含まれます。

双方向バインディング

Angular では双方向のデータ バインディングが可能なので、アプリケーションはコンポーネントからテンプレートへ、またはその逆の双方向でデータを共有できます。これにより、アプリケーション内に存在するモデルとビューが常に同期されます。双方向データ バインディングでは、要素のプロパティの設定と要素変更イベントのリッスンという 2 つの処理が実行されます。

双方向バインディングの構文は [()} です。ご覧のとおり、これはプロパティ バインディング構文 (つまり []) とイベント バインディング構文 () の組み合わせです。 Angular によれば、この構文は「箱に入ったバナナ」のようなものです。

例：

<label><b>名前:</b>
        <input [(ngModel)]="コース名" プレースホルダー="名前"/>
</ラベル>

このコードを実行すると、モデルまたはビューを変更すると、対応するビューとモデルも変更されることがわかります。下の画像を見てください。ビューからコース名が「Python」から「Pytho」に変更されています。

以上がAngularデータバインディングとその実装の詳細な説明です。Angularデータバインディングとその実装の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。