Dinamik Verileri Yönetme

Şimdi bir bileşim için temel yapıyı öğrendiğimize göre, bileşimin verilerini (yani durumu) ve davranışını nasıl tanımlayabileceğinizi öğrenelim.

State Nedir? #

Bileşenler, uygulamanın ayrı parçaları için sorumluluğu düzgün bir şekilde kapsamanıza olanak tanır. Örneğin, bir SignUpForm bileşeni, kullanıcıların belirli bir işlemi yapmadan önce formun geçerli olup olmadığını takip etmesi gerekebilir. Sonuç olarak, bir bileşenin izlemesi gereken çeşitli özellikler genellikle “state” olarak adlandırılır.

State Tanımlama #

Durumu tanımlamak için bileşeninizin içinde sınıf alanları sözdizimini kullanırsınız.

Örneğin, TodoListItem bileşenini kullanarak izlemek istediğiniz iki özellik oluşturun:

taskTitle – Görevin başlığının ne olduğu
isComplete – Görevin tamamlanıp tamamlanmadığı

// todo-list-item.component.ts
@Component({ ... })
export class TodoListItem {
  taskTitle = '';
  isComplete = false;
}

State Güncelleme #

Bir durumu güncellemek istediğinizde, genellikle bu, bileşen sınıfındaki çeşitli sınıf alanlarına erişebilen yöntemleri tanımlayarak gerçekleştirilir.

// todo-list-item.component.ts
@Component({ ... })
export class TodoListItem {
  taskTitle = '';
  isComplete = false;
  completeTask() {
    this.isComplete = true;
  }
  updateTitle(newTitle: string) {
    this.taskTitle = newTitle;
  }
}