Sıfırdan Angular 6 — 4. Componentlerin Haberleşmesi

Bu dersimizde componentler arası veri nasıl aktarılır onu göreceğiz. Hello Component’ime “data” isimli bir Input tanımlayarak başlıyorum.

@Input() data: string;

Değişkenler Constructor’ın üzerine tanımlanır. Input() fonksiyonunuzu import etmeyi unutmayınız. Bu şu işe yarıyor. Hello Component’imizin çağırıldığı componentten herhangi bir datayı bu inputu kullanarak Hello Component içerisine verebiliyoruz. Herhangi bir değişikliği anlık görebiliyoruz. Hello Component’imizi App Component içerisinde çağırmıştık. çağırdığımız yerdeki inputu şöyle kullanıyoruz.

<app-hello [data]="name"></app-hello>

Gördüğünüz gibi data değişkenimi köşeli parantezlerle çağırdım. Bu input demektir. “name” ise benim app componentte oluşturduğum bir değişken ve bunu bir text box’a atadım. Böylelikle ne yazarsam Hello Component’te de onu görüyorum.

Inputu kısaca özetlemiş olduk. Kaynak için konunun sonundaki paylaştığım Github linkini inceleyin.

Gelelim diğer olayımıza;

Hello Component dosyamdaki veriyi üste yani App Component’e iletmek istiyorum. Burada Output kullanabiliriz. Inputtan farklı olarak Output anlık olarak yayın yapmaz. Tanımladığım Output:

@Output() onUpdate = new EventEmitter();

Siz Emit fonksiyonunu kullandığınız yerde tetikler ve App Component bunu algılar.

this.onUpdate.emit(value);

App Component’de nasıl yakalıyoruz ona bir bakalım;

<app-hello [data]="name" (onUpdate)="onUpdateHello($event)"></app-hello>

“(onUpdate)”; dikkat ediniz, outputlar parantez ile kullanılması gerekiyor. Hello Component’imde outputumu emit ettiğimde, ne yapmak istiyorsanız tırnaklar içerisine gönderiyorsunuz. Ben burada bir fonksiyona gönderdim.

Yukarıda projeyi inceleyebilirsiniz canlı olarak.

https://github.com/mehmterim/HelloApp/commit/92c7d766b4d830d64f0ceed84b2be52945c5efe4

Yukarıdaki linkten bu derste yaptığımız değişiklikleri görebilirsiniz.

Bu derste size componentler arası veri nasıl aktarmanın bir yöntemini anlatmaya çalıştım. Daha profesyonel olarak NGXS State Management kullanabilirsiniz. Bir sonraki derste görüşmek dileğiyle…