Bileşenler Arası Etkileşim

Bu derste bileşenlerin Angular'da, özellikle üst ve alt bileşenler arasında, nasıl iletişim kurduğunu öğreneceksiniz.

Üst ve Alt Bileşen Etkileşimi

Bileşenlerin genellikle verileri paylaşması gerekir. Üst bileşenler, girdi özelliklerini kullanarak verileri alt bileşenlere aktarabilir.

@Input() Kullanımı

Bir üst bileşenden veri almak için @Input() dekoratörünü kullanın:

@Input() userData: string;

Alt Bileşene Veri Aktarma

Üst bileşeninizin şablonunda, özellik bağlamayı kullanarak veri aktarın:

<app-child [userData]="parentData"></app-child>

Alt Bileşenden Üst Bileşene İletişim

Alt bileşenler, @Output() dekoratörüyle olayları kullanarak üst bileşenlere iletişim gönderir.

@Output() Kullanımı

Alt bileşenden üst bileşene veri göndermek için bir olay yayıcısı oluşturun:

@Output() dataEvent = new EventEmitter<string>();

Olayları emit Etme

Olayları alt bileşenden emit edin:

sendData() {
  this.dataEvent.emit('Hello from Child');
}

Üst Bileşende Olayları Dinleme

Yayımlanan olayları üst bileşenin şablonunda işleyin:

<app-child (dataEvent)="handleEvent($event)"></app-child>

Özet

Artık bileşenlerin Angular'da girdiler ve çıktılar aracılığıyla nasıl etkileşim kurabileceğini anlıyorsunuz. Pratik yapmaya devam edin!