Angularの双方向データバインディングはどのように実現されていますか?
Angularの双方向データバインディングは次の手順で実現します:
- HTML テンプレートで二重中括弧 {{ }} を使用することでデータと HTML 要素をバインドできます。(例: {{myData}})
- コンポーネントクラスでバインドするデータ属性を定義し、初期化します。例えばコンポーネントクラスでmyDataという名前のプロパティを定義し、初期値で初期化します。
- フォームエレメントの値を[(ngModel)]ディレクティブを使ってコンポーネントクラスのデータプロパティにデータバインドします。例えば、[(ngModel)]ディレクティブを使ってinputエレメントの値をmyDataプロパティにバインドするには、を使用します。
- Angularはフォーム要素の値が変更されたときにコンポーネントクラスのデータプロパティの値を自動的に更新します。
- Angularは、コンポーネントクラス内にあるデータプロパティの値が変更されると、対応するHTMLテンプレート内のデータバインディングを自動的に更新します。
Angular の双方向データバインディングの実現は、次の 3 ステップに要約できます。データを HTML テンプレートにバインドします。[(ngModel)] ディレクティブを使用して、フォーム要素の値をデータプロパティにバインドします。データプロパティの値が変更されると、Angular は自動的に対応する HTML テンプレートのデータバインディングを更新します。