Angular 2+ での 1 回限りのデータバインディング

1. ビューへのコンポーネント
2. Angular 2+ でワンタイムデータバインディングを使用する手順

Angular 2+ では、1 回限りのデータバインディングは、モデルまたは入力プロパティに変更があった場合にのみビューを更新します。このタイプのデータバインディングは、ビューへの不要な更新を減らし、コンピューターのパフォーマンスを向上させ、作業を減らします。

一方向のデータバインディングの一方向性は明らかです。1つのコンポーネントまたはビューから別のコンポーネントにのみデータをリンクできます。

ビューへのコンポーネント

いくつかのデータバインディング戦略では、一方向のデータバインディングを使用して、コンポーネントからビューにデータを接続します。

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

この手法を使用すると、HTML 要素のプロパティをモデルのオブジェクトプロパティにバインドできます。コンポーネントのプロパティ値を変更し、その値を同じビューの HTML 要素にラップする必要があります。

トグル機能とメンバー間のデータ交換には、プロパティバインディングを使用します。

属性バインディング

この手法を使用すると、HTML 要素の属性をモデルのオブジェクトプロパティにバインドし、変更が発生したときに更新される属性値を指定できます。

クラスバインディング

この手法は、DOM 要素を AngularJS クラスにバインドし、モデルからのデータでそれらを更新できるようにします。

補間バインディング

内挿法により、ユーザーはユーザーインターフェイス要素に値を付加できます。補間は一方向のプロセスでデータをバインドするため、データはコンポーネントから HTML 要素に 1つの方法で流れます。

Angular 2+ でワンタイムデータバインディングを使用する手順

このセクションでは、Angular 2+ で一方向のデータバインディングを使用する方法を説明します。

例（TypeScript）：

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    demo = 'Write something here'
}

例（HTML）：

<h1>Example of Angular One way Data Binding</h1>
<textarea id="hello" name="demo" class="form-control" (change)="demo = $event.target.value"></textarea>
{{demo}}

上記のコードのライブデモンストレーションを確認するには、ここをクリックしてください。