@output ile Bileşen İletişimi

Bileşenlerle çalışırken, diğer bileşenlere bir şeyin gerçekleştiğini bildirmek gerekebilir. Belki bir butona tıklanmış, bir öğe listeden eklenmiş/çıkarılmış veya başka önemli bir güncelleme olmuştur. Bu senaryoda bileşenlerin üst bileşenlerle iletişim kurması gerekir.

Angular bu tür bir davranışı sağlamak için output() fonksiyonunu kullanır.

NOTE: Çıkış özellikleri kılavuzundaki özel olaylar hakkında daha fazla bilgi edinin.

Bu aktivitede, bileşenlerle iletişim kurmak için output() fonksiyonunu nasıl kullanacağınızı öğreneceksiniz.

Alt bileşenden üst bileşene iletişim yolunu oluşturmak için, bir sınıf özelliğini başlatmak üzere output fonksiyonunu kullanın.

child.ts

@Component({...})
class Child {
  incrementCountEvent = output<number>();
}

Artık bileşen, üst bileşen tarafından dinlenebilecek olaylar üretebilir. emit metodunu çağırarak olayları tetikleyin:

child.ts

class Child {
  ...

  onClick() {
    this.count++;
    this.incrementCountEvent.emit(this.count);
  }
}

emit fonksiyonu, output tarafından tanımlanan türle aynı türde bir olay üretecektir.

Pekala, şimdi sıra sizde. Aşağıdaki görevleri takip ederek kodu tamamlayın:

  1. Bir output() özelliği ekleyin

    child.ts dosyasını, addItemEvent adında bir output özelliği ekleyerek güncelleyin ve output türünü string olarak ayarladığınızdan emin olun.

  2. addItem metodunu tamamlayın

    child.ts dosyasında addItem metodunu güncelleyin; mantık olarak aşağıdaki kodu kullanın:

    child.ts

    addItem() {
  this.addItemEvent.emit('🐢');
}

  3. App şablonunu güncelleyin

    app.ts dosyasında, yayılan olayı dinlemek için aşağıdaki kodu ekleyerek şablonu güncelleyin:

    <app-child (addItemEvent)="addItem($event)" />

    Artık "Add Item" butonuna her tıklandığında listeye yeni bir öğe eklenir.

Bu noktada bileşen temellerini tamamladınız - etkileyici 👏

Angular'ın daha fazla harika özelliğini keşfetmek için öğrenmeye devam edin.