Bileşen İletişimi
Angular’da Bileşen İletişimi (Component Communication), uygulamanın farklı kısımlarında yer alan bileşenlerin birbirleriyle veri alışverişi yapmasını sağlayan temel bir kavramdır. Modern web uygulamaları, genellikle küçük, yeniden kullanılabilir ve bağımsız bileşenlerden oluşur. Ancak bu bileşenlerin işlevsel bir bütünlük oluşturabilmesi için veri akışının kontrollü bir şekilde sağlanması gerekir. İşte bu noktada bileşen iletişimi devreye girer. Angular’da iletişim; @Input() ve @Output() dekoratörleri, servis tabanlı durum yönetimi, EventEmitter kullanımı, ViewChild erişimi veya RxJS Subjects üzerinden gerçekleştirilebilir.
Geliştirici, hangi iletişim stratejisinin kullanılacağını belirlerken bileşenlerin hiyerarşisini, veri akış yönünü ve performans gereksinimlerini göz önünde bulundurmalıdır. Bu eğitimde, Angular bileşenleri arasında nasıl etkili, ölçeklenebilir ve güvenli bir iletişim kurulacağını öğreneceksiniz. Ayrıca, veri akışının yönetimi, bileşen yaşam döngüsünün iletişim üzerindeki etkisi ve sık yapılan hataların nasıl önlenebileceği üzerinde duracağız. Bu bilgiler, modern Single Page Application (SPA) yapılarında komponent bazlı düşünmeyi güçlendirecek ve sürdürülebilir Angular projeleri geliştirmenizi sağlayacaktır.
Temel Örnek
typescript// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';
@NgModule({
declarations: [AppComponent, ParentComponent, ChildComponent],
imports: [BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule {}
// parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: ` <h2>Parent Bileşeni</h2> <input [(ngModel)]="parentMessage" placeholder="Mesaj girin"> <app-child [childMessage]="parentMessage" (messageEvent)="receiveMessage($event)"></app-child> <p>Child'dan gelen mesaj: {{ receivedMessage }}</p>
`
})
export class ParentComponent {
parentMessage = '';
receivedMessage = '';
receiveMessage(event: string) {
this.receivedMessage = event;
}
}
// child.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: ` <h3>Child Bileşeni</h3> <p>Parent'tan gelen mesaj: {{ childMessage }}</p> <button (click)="sendMessage()">Parent’a Mesaj Gönder</button>
`
})
export class ChildComponent {
@Input() childMessage!: string;
@Output() messageEvent = new EventEmitter<string>();
sendMessage() {
this.messageEvent.emit('Merhaba Parent!');
}
}Yukarıdaki örnekte, Angular’da @Input() ve @Output() dekoratörleri kullanılarak iki yönlü bileşen iletişimi gösterilmektedir. ParentComponent, bir değer (parentMessage) oluşturur ve bunu ChildComponent'e property binding aracılığıyla aktarır. Child bileşeni bu değeri @Input() özelliği ile alır. Böylece verinin yukarıdan aşağıya (parent → child) akışı sağlanır.
Ters yönde, yani child bileşenden parent bileşene veri iletimi ise EventEmitter ve @Output() aracılığıyla yapılır. Child bileşeninde sendMessage() metodu çağrıldığında, messageEvent.emit() ile olay tetiklenir ve Parent bileşenindeki receiveMessage() metodu bu olayı dinler. Böylece veri aşağıdan yukarıya (child → parent) taşınır.
Bu model, Angular’ın tek yönlü veri akışı prensibini korurken, bileşenler arasında güçlü bir bağ kurulmasını sağlar. Aynı zamanda bileşenlerin birbirine doğrudan bağımlı olmasını önler. Gerçek dünya projelerinde bu yaklaşım, modülerlik ve test edilebilirlik açısından büyük avantaj sağlar. Ayrıca ngOnChanges() veya ngOnInit() gibi yaşam döngüsü hook’larıyla veri değişimlerinin izlenmesi mümkündür. Bu sayede bileşenlerin dinamik olarak güncellenmesi, SPA uygulamalarında akıcı bir kullanıcı deneyimi sunar.
Pratik Örnek
typescript// shared.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class SharedService {
private messageSource = new BehaviorSubject<string>('Varsayılan mesaj');
currentMessage = this.messageSource.asObservable();
changeMessage(message: string) {
this.messageSource.next(message);
}
}
// sender.component.ts
import { Component } from '@angular/core';
import { SharedService } from './shared.service';
@Component({
selector: 'app-sender',
template: ` <h3>Sender Bileşeni</h3> <input [(ngModel)]="message" placeholder="Yeni mesaj yazın"> <button (click)="sendMessage()">Gönder</button>
`
})
export class SenderComponent {
message = '';
constructor(private sharedService: SharedService) {}
sendMessage() {
this.sharedService.changeMessage(this.message);
}
}
// receiver.component.ts
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { SharedService } from './shared.service';
@Component({
selector: 'app-receiver',
template: ` <h3>Receiver Bileşeni</h3> <p>Gelen mesaj: {{ message }}</p>
`
})
export class ReceiverComponent implements OnInit, OnDestroy {
message!: string;
subscription!: Subscription;
constructor(private sharedService: SharedService) {}
ngOnInit() {
this.subscription = this.sharedService.currentMessage.subscribe(msg => this.message = msg);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}Bu gelişmiş örnek, servis tabanlı bileşen iletişiminin nasıl gerçekleştirileceğini göstermektedir. SharedService, iki bileşen arasında ortak bir veri kaynağı görevi görür. BehaviorSubject, başlangıç değeriyle bir observable oluşturur ve bu sayede bileşenler arasında reaktif bir veri akışı sağlanır.
SenderComponent, kullanıcıdan alınan veriyi SharedService üzerinden yayınlar. ReceiverComponent ise bu değişiklikleri subscribe() ederek anlık olarak alır. Bu yöntem, bileşenler arasında doğrudan bir hiyerarşi olmasa bile veri paylaşımını mümkün kılar. Ayrıca, Angular’ın RxJS ekosistemine dayandığı için performans açısından optimize edilmiş, hafif ve reaktif bir yapıdır.
Bu model, prop drilling sorunlarını önler ve büyük uygulamalarda merkezi durum yönetiminin (state management) temelini oluşturur. ngOnDestroy() içinde yapılan unsubscribe() işlemi, bellek sızıntılarını önlemek için kritik bir Angular pratiğidir. Gerçek dünyada, servis tabanlı iletişim; bildirim sistemleri, kullanıcı oturum yönetimi veya ortak durumun izlenmesi gibi durumlarda yaygın olarak kullanılır.
Angular Bileşen İletişimi için en iyi uygulamalardan bazıları şunlardır:
- Tek yönlü veri akışını koruyun: Parent → Child veri akışı her zaman açık ve tahmin edilebilir olmalıdır.
- State mutasyonlarından kaçının: Nesneleri doğrudan değiştirmek yerine immutable yaklaşımlar kullanın.
- EventEmitter’ları dikkatli yönetin: Gereksiz olay yayını performans düşürür.
- Servis tabanlı iletişim için RxJS Subject/BehaviorSubject tercih edin.
- Lifecycle hook’larını kullanarak veri senkronizasyonunu kontrol edin (
ngOnChanges,ngOnInit,ngOnDestroy). - Performans optimizasyonu:
ChangeDetectionStrategy.OnPushkullanımıyla gereksiz yeniden renderları azaltın.
Yaygın hatalar arasında prop drilling (çok katmanlı veri aktarımı), unsubscribe edilmeyen subscription’lar, ve tek yönlü veri akışının ihlali bulunur. Debugging sırasındaAuguryveyaAngular DevToolskullanarak bileşen hiyerarşisini ve veri akışını analiz etmek oldukça yararlıdır. Güvenlik açısından, bileşenler arası iletişimde gelen veriler her zaman doğrulanmalı ve kullanıcı girdileri sanitize edilmelidir. Performans için ise gereksiz change detection döngülerinden kaçınmak, uygulama ölçeklenebilirliğini artırır.
📊 Referans Tablosu
| Angular Element/Concept | Description | Usage Example |
|---|---|---|
| @Input() | Parent bileşenden Child bileşene veri aktarımı | @Input() userName: string; |
| @Output() | Child bileşenden Parent bileşene olay gönderimi | @Output() messageEvent = new EventEmitter<string>(); |
| EventEmitter | Event bazlı veri gönderimi sağlar | this.messageEvent.emit('Hello Parent'); |
| BehaviorSubject | Reaktif servis iletişimi için veri akışı sağlar | this.messageSource.next('Yeni mesaj'); |
| ChangeDetectionStrategy.OnPush | Performans için gereksiz renderları engeller | @Component({changeDetection: ChangeDetectionStrategy.OnPush}) |
| ngOnChanges() | @Input değişimlerini yakalamak için lifecycle hook | ngOnChanges(changes: SimpleChanges) |
Özetle, Bileşen İletişimi, Angular uygulamalarının dinamik ve modüler yapısını güçlendiren bir temel kavramdır. Bu konu, uygulama içi veri akışını düzenli hale getirerek kodun okunabilirliğini, test edilebilirliğini ve sürdürülebilirliğini artırır.
Bu konuyu öğrendikten sonra, Angular’da state management (örneğin NgRx), change detection stratejileri ve performans optimizasyonu gibi ileri düzey konulara geçmeniz önerilir. Gerçek projelerde, bileşen iletişimi prensiplerini doğru uygulamak, büyük ölçekli SPA’larda hata oranını azaltır ve bakım maliyetini düşürür.
Bir sonraki adım olarak, servis tabanlı veri paylaşımını RxJS operatörleriyle geliştirmeyi, dinamik bileşen yüklemeyi ve context-aware bileşen iletişimini öğrenebilirsiniz. Bu bilgiler, profesyonel Angular geliştiricilerinin daha verimli, ölçeklenebilir ve kullanıcı dostu uygulamalar geliştirmesini sağlar.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek