Angular: Decoratorler ile DOM sorgulama
DOM; Document Object Model’in kısaltmasıdır. Sayfanın mantıksal yapısı ve sayfanın içerine ulaşıp, değiştirme işlemleri DOM element kullanılarak yapılır. Diğer taraftan, DOM; Javascriptin içerdiği sayfa verilerini görme şeklidir. Tarayıcının durumunu ve HTML/XHTML/XML’nin nasıl biçimlendirildiğini içeren bir nesnedir ve Tüm Html elementleri için eventler, metodları, özellikleri nesne olarak tanımlar.
DOM Queries
Angular, component/ directive içindeki farklı refereans tipleri için iki yol sunar.
- ViewChild/ViewChildren
- ContentChild/ContentChildren
DOM sorgulama yapmak için bu decoratorleri nasıl kullanabileceğimize bakalım.
ViewChild/ViewChildren Nedir?
@ViewChild decoratorü, Dom ağacındaki bir tane DOM nesnesinin referansını sorgulamak için kullanılırken, @ViewChildren decoratorü ise sorgu listesi olarak bir referans listesi döndürmek için kullanılır. (ViewChildren'ni @ olmadan kullandıktan sonra)
ViewChild
Aşağıdaki kod ViewChild decoratörünün söz dizilimini gösterilmiştir.
Yukarıdaki söz diziliminden de görüldüğü gibi 3 tane ana parametresi mevcuttur.
- selector: Sorgulanacak elementin belirtecidir ve bir string, tip(type) veya dönüş tipi string veya type olan bir fonksiyon olabilir.
- read: Bu verilen seçeneklerden biridir. Sorgulanan elementtenn farklı bir token okumak için kullanılır.
- static: Sorgunun ne zaman çözüleneceği tanımlar. Sayfa görünümü ilk kez başladığında
true, Change detection’dan sonra tetiklenmesini istiyorsanızfalse.
Eğer nesneye onInit’te erişmek istenilirse
static:trueset edilmeli aksi durumda false set edilmeli. Angular 9 ve sonrasında static sadece true set edileceği zaman kullanılır false için herhangi bir bildirim yapmaya gerek yok.
Şimdi ViewChild kullanım örneğine geçiyoruz.
Bunun için, childcomponent isminde yeni bir component yaratıyoruz.
Aşağıdaki kod childcomponent component şablonuna aittir.
childcomponent componentini, App Component’in içerisinde child olarak kullandık. Bu nendenle, Ana component’ten gelecek değeri yazdırabilmek için child componente @Input decoratorünu kullanarak birtane input değişkeni tanımladık.
Daha sonra, bazı ayarları yapmak için app component’e geçiyoruz. Burada app.component.html’de child component’e ait olan selector’u kullandık.
componentName isminde özelliği olan başka bir component selector’ünü kullanığımızı ilk görüşte fark edebilirsiniz. Ana component’en child component’e ulaşabilmek için bu özelliği kullanıyoruz.
Angular 9+ sonrası kullanım için tıklayınız. static eğer false olacaksa kullanmaya gerek yok.
demo değişkenini kullanarak childcomponent’e ait bilgilere doğrudan ulaşabilirsiniz.
Burada AfterViewInit yaşam döngüsündeki kullanımından dolayı şüpheniz olduğunu düşünüyorum. Child component, uygulama yüklenene kadar tam olarak yüklenmemiş olabilir. Eğer bu durumda child component’e ulaşmaya çalışırsanız, undefined dönecektir. Bu yüzden uygulama tam olarak yüklendikten sonra AfterViewInit’i Angular çağırdığı için kullanıyoruz.
Ayrıca child component’e ulaşmak için ViewChild’ı aşağıdaki gibi kullanabiliriz.
Burada button element’ine ulaşmak için Html elementini dönen ElementRef kullanabiliriz. Nesne’ye ana componentt’en şu şekilde erişilebilir.
Bu kısım ve aşağıdaki örnek makalede yok. Başka örnekler vermek istedim. Örneğin ViewChild’a parametre olarak component veya directive verilerek DOM’da değişiklikler yapılabilir. Klasik bir örnek olacak ama örneğin sayaç işlemi yapılabilir. Butonlar aracığı ile sayacın değeri artırılabilir veya azaltılabilir. Ekrandaki butona bastıkça ilgili elementin rengi değiştirilebilir.
Component kullanımına örnek:
Directive kullanımına örnek:
ViewChildren
ViewChild ve ViewChildren arasındaki fark; ViewChildren bir Query liste referansı dönmektedir.
Aşağıdaki örnekte demochild componet’inde nasıl kullanıldığı gösterilmektedir.
demochild compenent ise;
Bir sonraki adımda ana component olan app componet şu şekilde olacak.
Buna bakarak child componentlere ulaşmak için name özelliğini 3 kere kullandığımız hemen anlayabilirsiniz. Öyleyse child componentlere bu referanslar aracılığı ile erişebilmemiz gerekiyor.
toArray metodunu kullanarak bu listeyi diziye çevirebilir bu sayede QueryList’deki child değişkenlere daha iyi görselleştirme için erişebilirsiniz.
Bu kısım ve aşağıdaki örnek makalede yok. Başka örnekler vermek istedim. ViewChildren’a parametre olarak Component, Directive , ElementRef, template referance ve read meta datası verilebilir.
Örnek:
ContentChild/ContentChildren Nedir?
Hem ContentChild hem de ContentChildren ; ViewChild ve ViewChildren ile benzerlik göstermektedir ama aralarında bir fark bulunmaktadır.
“ViewChild veya ViewChildren; Her hangi DOM elementine, Componente veya Directive erişebilir ama projected content’te erişemezler. Öte yandan ContentChild veya ContentChildren projected content’te erişebilirken ancak başka herhangi bir içeriğe erişmek için kullanılmazlar.”
- Burada projected content; Ana component’ten child componente HTML içeriği geçmenin bir yoludur ve child component, belirlenen bir noktada bu şablonu gösterecektir. Child componentte atamnış noktada(yerde) şabolonu göstermek için
ng-contentelementini kullanırız. Ayrıcang-contentbu selector’u birden çok kullanarak farklı alanlar oluşturmamıza olanak sağlar. Böylece Ana component bu alanlara farklı içerikler gönderebilir.
ContentChild
Aşağıdaki söz dizilimi bize ContentChild’in, ViewChild’in söz dizilimine benzediğini göstermektedir.
Daha anlaşılır olmak için örneğe geçelim.
İlk olarak, Child component olarak kullanıcak olan bir card componenti yaratıp ve bu componenti kullanarak tek bir card yaratıyoruz.
Card component’te; Ayrı ayrı olarak ng-content kullandık. Bir sonraki adımda, header selector’ünü kullanarak header card component’ine HTML içeriği geçeceğiz. İstediğiniz herhangi HTML içeriğini diğer card component’lerine de geçebilirsiniz.
Bunun için, card list component’ini ana component olarak kullanıyoruz.
Eğer dikkatlice bakarsanız, h tag’inin içince header property’sini kullarak header’a ulaştığımızı görebilirsiniz.
Bir sonraki adımda card component’e dönüyoruz ve ContentChild’i kullarak güncelliyoruz.
İlk olarak @angular/core'dan ContentChild’ı import ediyoruz.
Daha sonra card component’e aşağıdaki kod parçacığını ekliyoruz.
Burada, headerContent bir değişken. ContentChild decorator’ünü bu değişkene uyguluyoruz. header okumak istediğimiz şablon değişkenidir.h tag’ine uygulandığından bize ElementRef dönecektir.
Ayrıca AfterContentInit lifescycle hook’unu kullanıyoruz. headerContent AfterContentInit hook’ından sonra kullanılabilir durumda olacaktır. Son olarak renderor2 header elementinin stilini değiştirmek için kullandık.
ContentChildren
ContentChildren, ContentChild ile benzerdir ama bize her zaman elementlerin referansını içeren bir liste dönecektir. Eğer birden çok element varsa ContentChild bize ilk karşılaştığı elementi dönecektir.
Bu kısım ve aşağıdaki örnek makalede yok. ContentChildren’a parametre olarak Component, Directive , ElementRef, template referance ve read meta datası verilebilir.
Okuduğunuz için teşekkür ederiz. Umarım faydalı olmuştur. Düşünceleriniz yorumlarda bana bildirebilirsiniz.
Daha Fazla Bilgi Edinin
