Angular’da @Input ve @Output Değişkenler İle Componentler Arası İletişim
Merhaba,
Günümüz UI mimarilerinin birçoğu, birbirlerinden bağımsız olacak şekilde geliştirilen bileşen(component) yapılanmalarının bir araya gelmesi neticesinde bütünün oluşturulması ve böylece uygulamanın yönetilebilir ve ölçeklendirilebilir parçalardan meydana getirilmesi mantığına dayalı bir yaklaşım benimsemektedirler. Haliyle bu yaklaşımın bayraktarlığını yapan ve birçok mimari yahut kütüphaneye bu konuda ön ayak olan Angular mimarisinde, bütünün parçaları olan componentlerde @Input ve @Output değişkenlerinin nasıl bir rol aldıklarını ve componentler arası iletişimi nasıl sağladıklarını inceleyeceğiz.
İlk olarak kavramsal değerlendirmeyi anlaşılır kılabilmek için öncelikle componentler arası ilişkilendirmeyi ele alarak netleştirmek gerekmektedir. Bunun için bir Angular uygulaması oluşturunuz ve ardından içerisine “A” ve “B” olmak üzere iki adet component ekleyiniz. Ardından “A” componentinin görüntüsünde “B” componentini referans ediniz.
İşte bu ilişki neticesinde terminoloji devreye girmekte ve “A” componentine “Parent Component”, “B” componentine ise “Child Component” denmektedir.
Bu bilgiler eşliğinde artık @Input ve @Output değişkenleri açıklayabiliriz.
| @Input |
|---|
| Parent componentten(A) Child componente(B) veri göndermek için kullanılan değişkendir. |
‘b.component.ts’ içeriği;
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-b',
templateUrl: './b.component.html',
styleUrls: ['./b.component.css']
})
export class BComponent implements OnInit {
constructor() { }
@Input() data: string;
ngOnInit(): void {
console.log(`A'dan B'ye '${this.data}' değeri gönderilmiştir.`);
}
}
‘a.component.ts’ içeriği; <app-b data="Merhaba"></app-b> Burada görüldüğü üzere “B” componenti içerisindeki @Input data değişkenine attribute kıvamında erişebilmekte ve istediğimiz değeri gönderebilmekteyiz. Çıktı olarak; |
| @Output |
|---|
| Child componentten(B) Parent componente(A) veri göndermek için kullanılan değişkendir. |
‘b.component.ts’ içeriği;
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-b',
templateUrl: './b.component.html',
styleUrls: ['./b.component.css']
})
export class BComponent implements OnInit {
constructor() { }
@Output() myevent: EventEmitter<any> = new EventEmitter();
ngOnInit(): void {
this.myevent.emit({ message: "Merhaba" });
}
}
‘a.component.html’ içeriği; <app-b (myevent)="click($event)"></app-b> Burada da dikkat edilirse ‘b.component.ts’ içerisinde tanımlanan @Output türündeki “myevent” değişkeni “A” görüntüsü içerisindeki referansında event olarak kullanılabilmekte ve taşıdığı değeride ‘$event’ parametresiyle yakalayabilmektedir. ‘a.component.ts’ içeriği;
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-a',
templateUrl: './a.component.html',
styleUrls: ['./a.component.css']
})
export class AComponent implements OnInit {
constructor() { }
ngOnInit(): void { }
click(data) {
console.log(`B'den A'ya ${data.message} nesnesi gönderilmiştir.`);
}
}
|
@Input ve @Output yapılanmasının yukarıda pratik olarak ele aldığımız çalışma mantığını aşağıdaki görselde daha da somutlaştırarak inceleyebilirsiniz.
İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…
Ekstra olarak;
Yukarıda ele aldığımız ‘a.component.html’ dosyasının içeriğini gösteren
kod bloğunda ilgili data değeri .ts tarafından bir değişken vasıtasıyla gelecekse eğer ilgili parametreyi köşeli paranteze almanız yeterli olacaktır.
Kolay gelsin…
Elinize sağlık