RxJs Component Communication

Merhaba,

Bu yazımda Angular’da componentler arası iletişim konusuna değineceğim.

RxJS Kütüphanesi

RxJS reaktif programlama için bir kütüphanedir.

Reaktif programlama, veri akışları ve değişimin yayılması ile ilgili asenkron bir programlama paradigmasıdır.

Aşağıdaki diagram ile nasıl ilerleyeceğimize bakalım.

1- İletişim Servisi

ng g service /Service/observable

Yukarıdaki angular cli komutu ile servisimizi oluşturalım.

import { Subject, Observable } from ‘rxjs’;

Servisimize kullanacağımız modülü yukarıdaki şekilde import edelim.

Observable, oluşturulan veri akışı

Subject, dinlenilen obje

Alıcı component'in ts dosyası içinde getProducts metoduna subscribe olup ilgili datayı alabileceğiz.
sendProduct() metodu ile  herhangi bir bileşenden data gönderebileceğiz.

2- Alıcı Component

ng g c card ile card componentimizi oluşturalım.

card.component.ts

Burada getProduct() metoduna subscribe olduğumuzda; her button click işleminde sendProduct(product) metodu ile eklenen datayı dinleyip cards listesine ekliyoruz.

card.component.html

3- Gönderici Component

app.component.ts

Burada Sepete Ekle butonuna tıkladığımızda bir selectedProduct objesi sendProduct(product) metoduna verilecek. sendProduct fonksiyonu içerisinde bulunan next() fonksiyonu, kendisine abone olan fonksiyon için product nesnesini sunacak.

app.component.html

Sonuç olarak card component’i app.component’inden data alıp ekrana basmış oldu.

İyi Çalışmalar :)