Angular: Bak Şu Konuşana!

0 2,164

Bir önceki yazımda Angular’da componentler arası bilgi alış verişinde yaygın olarak kullanılan @Input ve @Output değişkenlerinden bahsetmiştim.

Bu yazımda ise ViewChild ve Service aracılığı ile bilgili alış verişinin nasıl olduğundan bahsedeceğim. Projenin kaynak kodlarını yazının sonunda bulabilirsiniz. Hadi başlayalım.

Senaryo önüme geldiğinde çok heyecanlandım.

– Senaryoyu okuyunca çok heyecanlandım.
– Çekerken biz çok eğlendik.
– Halkımızın da beğeneceğini umuyoruz.

Makalenin konusunun anlaşılması için “Loto Çekilişi” yapan bir proje yaratacağız. Projemiz 1 tane Parent component, 2 tane de Child componentten oluşacak. Genel yapı aşağıdaki şekilde olacak:

Resim-1: Proje Yapısı

Componentler arası iletişim şu şekilde olacak: Child componentten, Parent componente ViewChild ile ve Child componentten diğer Child(Sibling) componente Service ile bilgi aktarımı olacak.

Resim-2: Componentler arası bilgi akışı

“3, 2, 1 kayıt”

Yönetmen koltuğuna geçip, senaryomuzu hayata geçirelim. Bunun için işe her zaman olduğu gibi Angular CLI kullanarak projemizi oluşturmakla başlıyoruz

 

Bilgisayarınızda Visual Studio Code ve node.js yüklü olmalı. Eğer yüklü değilse Visual Studio Code için burayı, Node.js için burayı tıklayın

Visual Studio Codeyi açtıktan sonra terminale aşağıdaki kodu yazarak yeni projemizi yaratıyoruz

Projemde bootstrap kullandım. Bootstrap işlemleri için burayı tıklayınız. Ayrıca makalede template sayfalarında kullandığım css işlemleri hakkında bilgi vermeceğim, konumuz @ViewChild ve Service. Ama css kodların tamamı github linkinde olacaktır. Oradan bakıp sizde uygulayabilirsiniz.

Servis ve Componentleri yaratıyoruz:

Aşağıdaki komutları terminal’de sırası ile çalıştırıyoruz.

İşlemin sonunda proje yapımız şu şekilde olacaktır.

Resim-3: Proje Yapısı

@ViewChild ile parent componente bilgi gönderme(child → parent).

Parent componentin, doğrudan child component içinde bulunan fonksiyon ve özelliklerine (attribute)erişim yetkisi yoktur. “ViewChild” ile parent componente erişim yetkisi verilerek, child componenteki bilgilerin kullanılması sağlanır. Burada dikkat edilmesi gereken husus; Child component ekranda görüntülenmediği sürece parent componente herhangi bir erişim yetkisi verilemez. Eğer bu durum dikkate alınmazsa uygulama hataya düşebilir. Child componentin bilgilerini alabilmek için “AfterViewInit” yaşam döngüsü kancası(lifecycle hook) uygulamamız gerekmektedir. İlerde ViewChild hakkında detaylı bir makale yazmayı düşünüyorum. Şimdilik sadece Child componentten, parent componente bilgi aktarımını anlatacağım.

“cekilis-basla.component.ts” dosyasını açıp; cekilis değişkeni oluşturuyoruz. bu değişkende mesaj ve geriSayım nesnelere olacak.

Parent componentimiz olan “app.component.ts” açıyoruz ve “cekilis-basla.component.ts” de bulunan bilgilere erişim için aşağıdaki işlemleri yapıyoruz.

@ViewChild(CekilisBaslaComponent) child; ile child değişkenine CekilisBaslaComponent bulunan tüm özellikleri aktarıp, parent componente kullanması için yetki veriyoruz. child değişkenine aktarmış olduğumuz ve “CeklisBaslaCompononet” bulunan cekilis nesnesine ve onun içindeki mesaj ve mesajgeriSayım nesnelerine ulaşım, “child.cekilis”,“child.cekilis.mesaj” ve “child.cekilis.geriSayım” şeklinde olacaktır. childdeğişkeninde elde ettiğimiz bilgileri kullanmak için “ app.component.html” dosyasını açıp aşağıdaki işlemleri yapıyoruz. (7, 8 ve 10. satırda ilgili bilgileri kullandık)


 

Uygulamayı çalıştırdığımızda “Resim-2” de gösterildiği gibi “ Çekilişe Başlamak için Başlat Butonuna Basınız” yazısı ekranda görüntülenecektir. Bu bilgi child componenten, parent componente aktarılmış oldu. Resim-2 deki “Cekilişi Başlat” butonuna basıldığında parent componente yeni mesaj ve 10 dan geriye doğru sayım bilgisi gönderilecek.

Hatırlatma: “Loto Çekilişi” uygulamasında tüm componentler; uygulama açıldığında hemen gösterildiği için “AfterViewInit” life-cycle hook işlemi kullanılmamıştır.

Service ile bilgi paylaşımı

Birbiri ile bağlantısı olmayan componentler arası doğrudan bir bilgi paylaşımı bulunmamaktadır. Bu tarz componentler arası bilgi alış verişini “Service” aracılığı ile yapabiliriz. (child → child, child → parent, child → grandChild, child → subling vb.)

“cekilis-sonuc.service.ts” dosyasını açarak servisimizi yazmaya başlıyoruz. cekilisList değişkeni sibling component olan “cekilis-sonuc.ts” de sonuçları göstereceğimiz değişkendir. Kullanıcı “ceklis-basla.component.html” dosyasında bulunan “Çekilişi Başlat” butonuna bastıktan 10 saniye sonra cekilisSonuc() methodu tetiklenecek ve rastgele belirlenen sonuçlar cekilisList değişkenine aktarılacak. Yeni liste dolduğunda getSonuc()metodu ile sonuçlar “cekilis-sonuc.component.ts” dosyasına gönderilecek ve ekranda gösterilecektir.

 

“cekilis-sonuc.component.ts” dosyamızı açıp aşağıdaki işlemleri yapıyoruz.

 

14. satırda yazmış olduğumuz servisimizi enject(dependency injection) edip, 15. satırda serviste olacak değişiklikleri gözlemlemek için abone(subscribe) oluyoruz.

Servisimizi hatasız kullanabilmek için “app.module.ts” dosyasını açıp provider kısmına servisimiz tanımlıyoruz

Sonuç:

Projemizi çalıştırıyoruz. Terminale aşağıdaki kodu yazıyoruz

Makalenin kaynak kodları:

 

Email adresiniz yayınlanmayacaktır.