Angular の双方向データ バインディングの概要

    Angular の双方向データ バインディングにより、データはコンポーネントからビューに、またその逆に流れることができます。エンドユーザーに情報を表示するために使用され、エンドユーザーは UI を使用して基になるデータを変更できます。これにより、ビュー (テンプレート) と先に述べたコンポーネント クラスとの間に双方向の接続が確立されます。このプロセスは、WPF の双方向バインディングに似ています。

    Angular ではデータ バインディングはどのように機能しますか？

    Angular データ バインディングは、Angular コンポーネント内のデータを UI と同期することによって機能します。このようにして、データの現在の値を常に表示できます。双方向バインディングに関しては、Model (モデル) と View (ビュー) の間で自動データ同期が行われ、両者が常に同期された状態が維持されます。 このため、モデルに加えられた変更はすぐにビューにも反映されます。逆も同様です。ビューで行われた変更は、モデルでも更新されます。Angular の双方向データ バインディングは、エンドユーザーに情報を表示するために使用され、エンドユーザーは UI を使用して基になるデータを変更できます。これにより、ビュー (テンプレート) とコンポーネントクラスの間に双方向の接続が確立されます。これは、WPF の双方向バインディングに似ています。

    一方向バインディングは、コンポーネント クラスから状態を取得し、ビューに表示します。このコードを見てみましょう。

    <input #myTitle (keyup)="keyup(myTitle.value)">
<h2>{{ text }}</h2>

    export class SampleComponent implements OnInit {

text = 'default value';

keyup(value) {
  this.text = value;
}
...

    ここでは、補間を使用してテキスト プロパティを HTML にバインドしています。これにより、UI にテキスト プロパティの値が表示されます。input 要素は、ユーザー インタラクションを処理し、イベント バインディングによって UI を介して基になる text プロパティを更新します。基本的に、入力は一方向バインディングの反対を行い、UI から情報を取得して、コンポーネント クラスのプロパティを更新します。入力のキーアップ イベントにフックされるメソッドは、イベントが発生するたびにテキスト プロパティを更新します。イベント メソッドによってテキスト プロパティ値が変更されると、その変更は h2 要素の補間を使用した一方向バインディングによって UI に反映されます。したがって、ユーザーが入力要素に何かを入力すると、すぐに h2 テキストが更新されます。この動作は、基本的に双方向バインディングのシミュレーションです。同じことは、一方向バインディングとキー アップイベント ハンドラーを使用して WPF でも実現できますが、双方向バインディングを使用する方が便利です。

    Angular で双方向データ バインディングを実装する方法

    上記のサンプルのロジックをはるかに簡単な方法で実装することができます。以下は双方向バインディングの手順です。

    双方向バインディングの方向は、コンポーネントクラスから UI だけでなく、UI からコンポーネント クラスでもあります。これを実現するために、ngModel と呼ばれるディレクティブを使用します。上記のサンプルを ngModel ディレクティブで更新しましょう。そのための構文は、開き括弧とそれに続く開き括弧、次に対応する閉じ括弧と括弧。これはボックス内のバナナと呼ばれるものですが、実際に試してみましょう。

    <input [(ngModel)]="text">
<h2>{{ text }}</h2>

    そして、WPF の同様のバインディングは以下のようになります。

    <TextBox Text="{Binding Path=Text, Mode=TwoWay}"></TextBox>
<TextBlock Text="{Binding Path=Text, Mode=OneWay}"></TextBlock>

    Angular バインディングは構文の問題であり、WPF ではセットアップに似ています。特に Binding.Mode の値です。

    このコードを実行すると、コンソールでエラーが発生します。ngModel lは入力要素の不明なプロパティであるということです。ここでは、ngModel ディレクティブを使用するために FormsModule をインポートする必要があります。app.module.ts ファイルにインポートする必要があります。

    import { FormsModule } from '@angular/forms';
...
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ]
...

    サンプルを実行すると、初期入力の値はデフォルト値、つまり text プロパティの値に等しくなります。入力は編集可能であるため、その値を変更するとすぐに h2 要素に反映されます。そのため、入力に入力すると text プロパティが更新され、h2 要素は補間によってその値を表示します。

    その他の同様な方法として以下もあります。

    <input [ngModel]="text" (ngModelChange)="text = $event">

    これは実際には、プロパティ バインディングとイベント バインディングを使用した最初のサンプルに似ています。

    その他のリソース

    コミュニティに参加して新しいアイデアをご提案ください。