コンポーネントの基本構造を学んだので、コンポーネントのデータ（つまり状態）と動作を定義する方法を学びましょう。
状態とは？
コンポーネントを使用すると、アプリケーションの個別部分の責任をきれいにカプセル化できます。たとえば、SignUpFormコンポーネントは、ユーザーが特定の操作をする前に、フォームが有効かどうかを追跡しなければならない場合があります。その結果、コンポーネントが追跡する必要のあるさまざまなプロパティは、しばしば「状態」と呼ばれます。
状態の定義
状態を定義するには、コンポーネント内でクラスフィールド構文を使用します。
たとえば、TodoListItemコンポーネントを使用して、追跡する2つのプロパティを作成します。
taskTitle— タスクのタイトルisComplete— タスクが完了しているかどうか
// todo-list-item.component.ts@Component({ ... })export class TodoListItem { taskTitle = ''; isComplete = false;}
状態の更新
状態を更新する場合は、通常、コンポーネントクラスでメソッドを定義して、thisキーワードを使用してさまざまなクラスフィールドにアクセスします。
// todo-list-item.component.ts@Component({ ... })export class TodoListItem { taskTitle = ''; isComplete = false; completeTask() { this.isComplete = true; } updateTitle(newTitle: string) { this.taskTitle = newTitle; }}
次のステップ
動的なデータの宣言と管理方法を学んだので、テンプレート内でそのデータを使用する方法を学ぶ時です。