Angular projelerinizde s\u0131k\u00e7a kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z bir durum, bir ana bile\u015fenin alt bile\u015fenlerine, bir direktifin kendisine veya do\u011frudan DOM elemanlar\u0131na eri\u015fip onlarla etkile\u015fim kurma ihtiyac\u0131d\u0131r. \u0130\u015fte tam bu noktada Angular’\u0131n g\u00fc\u00e7l\u00fc ViewChild dekorat\u00f6r\u00fc devreye giriyor. ViewChild, template’inizdeki belirli bir \u00f6\u011feyi s\u0131n\u0131f\u0131n\u0131zda bir de\u011fi\u015fkene ba\u011flaman\u0131za olanak tan\u0131r. Bu sayede, bu \u00f6\u011fenin metotlar\u0131n\u0131 \u00e7a\u011f\u0131rabilir, \u00f6zelliklerini okuyabilir veya de\u011fi\u015ftirebilir, hatta olaylar\u0131n\u0131 dinleyebilirsiniz. Bu makalede, ViewChild’\u0131n ne oldu\u011funu, neden kullan\u0131ld\u0131\u011f\u0131n\u0131, farkl\u0131 kullan\u0131m senaryolar\u0131n\u0131 ve en iyi pratikleri ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Amac\u0131m\u0131z, bu dekorat\u00f6r\u00fc etkin bir \u015fekilde kullanarak daha dinamik, etkile\u015fimli ve y\u00f6netilebilir Angular uygulamalar\u0131 geli\u015ftirmenize yard\u0131mc\u0131 olmakt\u0131r. Konuya s\u0131f\u0131rdan ba\u015flay\u0131p, temel kavramlar\u0131 a\u00e7\u0131klayarak, ard\u0131ndan uygulamal\u0131 \u00f6rneklere ge\u00e7erek ve ileri d\u00fczey ipu\u00e7lar\u0131yla bilgiyi peki\u015ftirerek ilerleyece\u011fiz.<\/p>\n
Angular’da geli\u015ftirme yaparken, bile\u015fenlerimiz aras\u0131ndaki ileti\u015fimi veya bir bile\u015fenin kendi template’indeki belirli elemanlarla etkile\u015fimini y\u00f6netmek olduk\u00e7a \u00f6nemlidir. Geleneksel olarak, veri ak\u0131\u015f\u0131 genellikle ViewChild, bir bile\u015fenin template’inde tan\u0131mlanm\u0131\u015f olan bir \u00f6\u011feyi (ba\u015fka bir bile\u015fen, bir direktif veya bir DOM eleman\u0131) yakalay\u0131p, bile\u015fen s\u0131n\u0131f\u0131n\u0131zdaki bir \u00f6zelli\u011fe ataman\u0131z\u0131 sa\u011flar. Bu atama, Angular’\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fc i\u00e7inde belirli bir noktada ger\u00e7ekle\u015fir, bu da ona eri\u015febilece\u011finiz anlam\u0131na gelir. Bu sayede, template’te g\u00f6rsel olarak var olan bir \u015feye programatik olarak m\u00fcdahale edebilirsiniz.<\/p>\n Neden ViewChild kullanmal\u0131y\u0131z sorusuna gelirsek, birka\u00e7 temel neden s\u0131ralayabiliriz:<\/p>\n * Alt Bile\u015fen Metotlar\u0131n\u0131 \u00c7a\u011f\u0131rma:<\/strong> Bir \u00fcst bile\u015fen, alt bile\u015feninin public bir metodunu \u00e7a\u011f\u0131rmak isteyebilir. \u00d6rne\u011fin, bir listeleme bile\u015feni, bir alt \u00f6\u011fe bile\u015feninin “temizle” metodunu \u00e7a\u011f\u0131rarak o \u00f6\u011feyi s\u0131f\u0131rlayabilir. ViewChild’\u0131n temel \u00e7al\u0131\u015fma mant\u0131\u011f\u0131, Angular’\u0131n template’i i\u015fledi\u011fi s\u0131rada, belirtilen se\u00e7iciyle e\u015fle\u015fen ilk \u00f6\u011feyi bulup, onu s\u0131n\u0131f\u0131n\u0131zdaki ilgili \u00f6zelli\u011fe atamas\u0131d\u0131r. Bu, template’in render edildi\u011fi ve DOM’un olu\u015fturuldu\u011fu bir a\u015famada ger\u00e7ekle\u015fir. Bu eri\u015fimin ne zaman m\u00fcmk\u00fcn oldu\u011funu anlamak, ViewChild’\u0131 do\u011fru kullanman\u0131n anahtar\u0131d\u0131r.<\/p>\n ViewChild dekorat\u00f6r\u00fcn\u00fcn esnekli\u011fi, onu \u00e7e\u015fitli senaryolarda kullanmam\u0131za olanak tan\u0131r. Bu b\u00f6l\u00fcmde, en yayg\u0131n kullan\u0131m alanlar\u0131n\u0131 detayl\u0131 \u00f6rneklerle inceleyece\u011fiz.<\/p>\n Bir \u00fcst bile\u015fen, alt bile\u015fenlerinin metodlar\u0131n\u0131 \u00e7a\u011f\u0131rmak veya onlar\u0131n \u00f6zelliklerine eri\u015fmek isteyebilir. Bu, \u00f6zellikle bir \u00fcst bile\u015fenin, alt bile\u015fenlerin durumunu kontrol etmesi veya onlardan veri almas\u0131 gerekti\u011finde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n Diyelim ki bir Yukar\u0131daki \u00f6rnekte, Bazen, template’teki standart HTML elemanlar\u0131na (input, div, span vb.) eri\u015fmeniz gerekebilir. Bu, \u00f6zellikle input alanlar\u0131na odaklanma, scroll pozisyonunu ayarlama veya bir eleman\u0131n boyutunu okuma gibi i\u015flemler i\u00e7in \u00f6nemlidir.<\/p>\n Bu \u00f6rnekte, Kendi yazd\u0131\u011f\u0131n\u0131z veya \u00fc\u00e7\u00fcnc\u00fc parti k\u00fct\u00fcphanelerden gelen direktiflere eri\u015fmek de ViewChild ile m\u00fcmk\u00fcnd\u00fcr. Bu, direktifin sundu\u011fu i\u015flevselli\u011fi dinamik olarak tetiklemek veya onun durumunu okumak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n \u00d6rne\u011fin, bir Bu \u00f6rnekte, template’teki <\/code> etiketine Bu kullan\u0131m, direktiflerinizi daha etkile\u015fimli hale getirmenin ve bile\u015fenlerinizle daha derin bir ba\u011f kurmalar\u0131n\u0131 sa\u011flaman\u0131n g\u00fc\u00e7l\u00fc bir yoludur.<\/p>\n ViewChild dekorat\u00f6r\u00fc, sadece temel e\u015fle\u015ftirmelerle s\u0131n\u0131rl\u0131 de\u011fildir. Daha karma\u015f\u0131k senaryolar\u0131 ele almak i\u00e7in ek se\u00e7enekler sunar.<\/p>\n Bazen, template’inizde ayn\u0131 se\u00e7iciye sahip birden fazla \u00f6\u011fe olabilir ve bunlar\u0131n hepsine eri\u015fmeniz gerekebilir. \u0130\u015fte bu durumda Yukar\u0131daki \u00f6rnekte, \u00d6rne\u011fin, bir bile\u015fenin k\u00f6k DOM eleman\u0131n\u0131 Bu \u00f6rnekte, Di\u011fer * Genel kural olarak, # Ger\u00e7ek D\u00fcnya Senaryolar\u0131 ve Vaka Analizleri<\/strong><\/p>\n Teorik bilgiyi peki\u015ftirmek i\u00e7in ViewChild’\u0131n ger\u00e7ek d\u00fcnyada nas\u0131l kullan\u0131ld\u0131\u011f\u0131na dair birka\u00e7 \u00f6rnek inceleyelim.<\/p>\n ## Vaka Analizi 1: Form Y\u00f6netimi ve Odaklanma<\/strong><\/p>\n Bir kay\u0131t veya giri\u015f formu d\u00fc\u015f\u00fcn\u00fcn. Kullan\u0131c\u0131 bir alan\u0131 doldurduktan sonra, sonraki alana otomatik olarak odaklanmak kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n Senaryo:<\/strong> Kullan\u0131c\u0131 ad\u0131n\u0131 girdikten sonra imlecin otomatik olarak \u015fifre alan\u0131na gitmesi.<\/p>\n * Problem:<\/strong> Kullan\u0131c\u0131n\u0131n her seferinde fareyle veya Tab tu\u015fuyla sonraki alana ge\u00e7mesi gerekir. Bu basit ama etkili kullan\u0131m, kullan\u0131c\u0131 etkile\u015fimini h\u0131zland\u0131r\u0131r ve formu daha kullan\u0131c\u0131 dostu hale getirir.<\/p>\n ## Vaka Analizi 2: Dinamik Liste G\u00fcncellemeleri ve Bile\u015fen \u0130leti\u015fimi<\/strong><\/p>\n Bir e-ticaret sitesinde \u00fcr\u00fcn listesi g\u00f6r\u00fcnt\u00fclendi\u011fini d\u00fc\u015f\u00fcn\u00fcn. Kullan\u0131c\u0131 bir \u00fcr\u00fcn\u00fc sepete ekledi\u011finde, liste \u00fczerindeki o \u00fcr\u00fcn\u00fcn “Sepete Eklendi” durumunu g\u00f6rsel olarak g\u00fcncellemek isteyebiliriz.<\/p>\n Senaryo:<\/strong> Bir \u00fcr\u00fcn kart\u0131 bile\u015feni ( * Problem:<\/strong> Ana bile\u015fen, alt bile\u015fenin durumunu nas\u0131l tetikleyecek? Bu \u00f6rnekte, # ViewChild Kullan\u0131rken Dikkat Edilmesi Gerekenler ve En \u0130yi Pratikler<\/strong><\/p>\n ViewChild g\u00fc\u00e7l\u00fc bir ara\u00e7 olsa da, yanl\u0131\u015f kullan\u0131ld\u0131\u011f\u0131nda beklenmedik davran\u0131\u015flara veya performans sorunlar\u0131na yol a\u00e7abilir. \u0130\u015fte ViewChild’\u0131 daha g\u00fcvenli ve etkili kullanman\u0131za yard\u0131mc\u0131 olacak baz\u0131 ipu\u00e7lar\u0131 ve en iyi pratikler:<\/p>\n * ViewChild’\u0131 kullan\u0131rken bu noktalara dikkat etmek, daha sa\u011flam, bak\u0131m\u0131 kolay ve hataya daha az e\u011filimli Angular uygulamalar\u0131 geli\u015ftirmenize yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n Angular’da ViewChild dekorat\u00f6r\u00fc, bile\u015fenlerinizin template’indeki DOM elemanlar\u0131, di\u011fer bile\u015fenler ve direktiflerle etkile\u015fim kurmak i\u00e7in vazge\u00e7ilmez bir ara\u00e7t\u0131r. Alt bile\u015fenlerin metotlar\u0131n\u0131 \u00e7a\u011f\u0131rmaktan, DOM elemanlar\u0131na odaklanmaya, hatta kendi yazd\u0131\u011f\u0131n\u0131z direktifleri kontrol etmeye kadar geni\u015f bir kullan\u0131m alan\u0131na sahiptir. Ger\u00e7ek d\u00fcnya vaka analizleri, ViewChild’\u0131n form y\u00f6netimi, dinamik liste g\u00fcncellemeleri ve kullan\u0131c\u0131 deneyimini iyile\u015ftirme gibi alanlarda nas\u0131l pratik \u00e7\u00f6z\u00fcmler sundu\u011funu g\u00f6stermi\u015ftir. Ancak, bu g\u00fc\u00e7l\u00fc arac\u0131n do\u011fru ve g\u00fcvenli bir \u015fekilde kullan\u0131lmas\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Unutmay\u0131n ki ViewChild, bile\u015fenler aras\u0131 ileti\u015fimde yaln\u0131zca bir ara\u00e7t\u0131r. * ViewChild ile yakalad\u0131\u011f\u0131m \u00f6\u011felere ne zaman eri\u015febilirim?<\/strong>@Input()<\/code> ve @Output()<\/code> dekorat\u00f6rleri arac\u0131l\u0131\u011f\u0131yla yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru ger\u00e7ekle\u015fir. Ancak, bazen bir \u00fcst bile\u015fenin alt bile\u015feninin bir metodunu \u00e7a\u011f\u0131rmas\u0131, alt bile\u015fenin DOM’daki bir eleman\u0131na do\u011frudan eri\u015fmesi veya bir direktifin kendisiyle etkile\u015fim kurmas\u0131 gerekebilir. \u0130\u015fte bu gibi senaryolarda ViewChild dekorat\u00f6r\u00fc hayat kurtar\u0131c\u0131d\u0131r.<\/p>\n
\n* DOM Elemanlar\u0131na Eri\u015fim:<\/strong> Template’teki bir <\/code>, <\/p>\nfocus()<\/code> metodunu \u00e7a\u011f\u0131rmak) veya de\u011ferlerini okuyabilirsiniz.
\n* Direktiflerle Etkile\u015fim:<\/strong> Kendi yazd\u0131\u011f\u0131n\u0131z veya \u00fc\u00e7\u00fcnc\u00fc parti bir k\u00fct\u00fcphaneden gelen bir direktifi yakalay\u0131p, onun sundu\u011fu metotlar\u0131 veya \u00f6zelliklerini kullanabilirsiniz. Bu, direktifin davran\u0131\u015f\u0131n\u0131 dinamik olarak kontrol etmenizi sa\u011flar.
\n* Odak Y\u00f6netimi:<\/strong> Kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in belirli bir input alan\u0131na otomatik olarak odaklanma gibi i\u015flemler ViewChild ile kolayca yap\u0131labilir.
\n* \u00d6zel Kontroller Olu\u015fturma:<\/strong> Karma\u015f\u0131k UI \u00f6\u011feleri olu\u015ftururken, i\u00e7 i\u00e7e ge\u00e7mi\u015f bile\u015fenlerin veya DOM elemanlar\u0131n\u0131n durumunu y\u00f6netmek i\u00e7in ViewChild’a ihtiya\u00e7 duyulabilir.<\/p>\nViewChild’\u0131n Farkl\u0131 Kullan\u0131m Senaryolar\u0131<\/h3>\n
1. Alt Bile\u015fenlere Eri\u015fme<\/h4>\n
ParentComponent<\/code>‘imiz var ve bu bile\u015fen i\u00e7inde bir ChildComponent<\/code> kullan\u0131l\u0131yor. ChildComponent<\/code>‘in reset()<\/code> ad\u0131nda bir metodu oldu\u011funu varsayal\u0131m.<\/p>\n\/\/ child.component.ts\nimport { Component } from '@angular\/core';\n\n@Component({\n selector: 'app-child',\n template: \n <p>\u00c7ocuk Bile\u015feni Mesaj\u0131: {{ message }}<\/p>\n <\/code>\n})\nexport class ChildComponent {\n message: string = 'Merhaba \u00c7ocuk!';\n\n reset() {\n this.message = 'S\u0131f\u0131rland\u0131!';\n console.log('ChildComponent reset metodu \u00e7a\u011fr\u0131ld\u0131.');\n }\n}\n\n\/\/ parent.component.ts\nimport { Component, ViewChild, AfterViewInit } from '@angular\/core';\nimport { ChildComponent } from '.\/child.component';\n\n@Component({\n selector: 'app-parent',\n template: \n <h1>\u00dcst Bile\u015fen<\/h1>\n <app-child #myChild><\/app-child>\n <button (click)="callChildReset()">\u00c7ocuk Bile\u015feni S\u0131f\u0131rla<\/button>\n <\/code>\n})\nexport class ParentComponent implements AfterViewInit {\n @ViewChild(ChildComponent) childComponent!: ChildComponent; \/\/ ChildComponent'in ilk \u00f6rne\u011fini yakalar\n\n callChildReset() {\n if (this.childComponent) {\n this.childComponent.reset();\n }\n }\n\n ngAfterViewInit() {\n \/\/ ViewChild ile yakalanan \u00f6\u011fe bu noktada eri\u015filebilir durumdad\u0131r.\n console.log('ngAfterViewInit i\u00e7inde childComponent:', this.childComponent);\n }\n}<\/code><\/pre>\nParentComponent<\/code>‘in template’inde app-child<\/code> etiketine #myChild<\/code> \u015feklinde bir referans ekledik. @ViewChild(ChildComponent)<\/code> dekorat\u00f6r\u00fc, bu referans arac\u0131l\u0131\u011f\u0131yla ChildComponent<\/code>‘in ilk \u00f6rne\u011fini childComponent<\/code> \u00f6zelli\u011fine atar. callChildReset()<\/code> metodu t\u0131kland\u0131\u011f\u0131nda, this.childComponent.reset()<\/code> \u00e7a\u011fr\u0131l\u0131r ve alt bile\u015fenin reset<\/code> metodu \u00e7al\u0131\u015f\u0131r.<\/p>\nngAfterViewInit<\/code> ya\u015fam d\u00f6ng\u00fcs\u00fc hook’u, ViewChild ile yakalanan \u00f6\u011felere eri\u015fmek i\u00e7in genellikle en uygun yerdir. \u00c7\u00fcnk\u00fc bu noktada template i\u015flenmi\u015f ve DOM olu\u015fturulmu\u015ftur.<\/p>\n2. DOM Elemanlar\u0131na Eri\u015fme<\/h4>\n
ElementRef<\/code> kullanarak DOM elemanlar\u0131na eri\u015fiyoruz. Template’teki <\/code> etiketine #myInput<\/code> referans\u0131n\u0131 verdik ve @ViewChild('myInput')<\/code> ile ElementRefmyInputRef<\/code> \u00f6zelli\u011fine atad\u0131k. nativeElement<\/code> \u00f6zelli\u011fi arac\u0131l\u0131\u011f\u0131yla do\u011frudan DOM eleman\u0131na eri\u015febilir ve onun metotlar\u0131n\u0131 (\u00f6rne\u011fin focus()<\/code>) veya \u00f6zelliklerini (\u00f6rne\u011fin value<\/code>) kullanabiliriz. Benzer \u015fekilde, #myDiv<\/code> referans\u0131 ile myDivRef<\/code>‘e eri\u015ferek div eleman\u0131n\u0131 da yakalayabiliriz.<\/p>\nElementRef<\/code>, Angular’\u0131n DOM ile g\u00fcvenli bir \u015fekilde etkile\u015fim kurmas\u0131n\u0131 sa\u011flar. Ancak, nativeElement<\/code>‘i do\u011frudan manip\u00fcle ederken dikkatli olmak gerekir, \u00e7\u00fcnk\u00fc bu, uygulaman\u0131n platformdan ba\u011f\u0131ms\u0131zl\u0131\u011f\u0131n\u0131 zedeleyebilir (\u00f6rne\u011fin, sunucu taraf\u0131 rendering veya web worker’lar ile \u00e7al\u0131\u015f\u0131rken sorunlara yol a\u00e7abilir). Genellikle, DOM manip\u00fclasyonlar\u0131n\u0131 Angular’\u0131n kendi soyutlamalar\u0131 (Renderer2 gibi) ile yapmak daha iyi bir pratiktir, ancak ViewChild ile ElementRef<\/code> kullan\u0131m\u0131 bu t\u00fcr do\u011frudan eri\u015fimler i\u00e7in yayg\u0131n bir yoldur.<\/p>\n3. Direktiflere Eri\u015fme<\/h4>\n
HighlightDirective<\/code> yazd\u0131\u011f\u0131m\u0131z\u0131 varsayal\u0131m:<\/p>\n\/\/ highlight.directive.ts\nimport { Directive, ElementRef, HostListener, Input } from '@angular\/core';\n\n@Directive({\n selector: '[appHighlight]'\n})\nexport class HighlightDirective {\n @Input('appHighlight') highlightColor: string = 'yellow';\n private originalColor: string = '';\n\n constructor(private el: ElementRef) { }\n\n @HostListener('mouseenter') onMouseEnter() {\n this.highlight(this.highlightColor);\n }\n\n @HostListener('mouseleave') onMouseLeave() {\n this.highlight(''); \/\/ Veya orijinal rengi geri y\u00fckle\n }\n\n highlight(color: string) {\n this.el.nativeElement.style.backgroundColor = color;\n }\n\n resetHighlight() {\n this.el.nativeElement.style.backgroundColor = this.originalColor;\n console.log('Highlight direktifi reset edildi.');\n }\n}\n\n\/\/ parent-with-directive.component.ts\nimport { Component, ViewChild, AfterViewInit } from '@angular\/core';\nimport { HighlightDirective } from '.\/highlight.directive';\n\n@Component({\n selector: 'app-parent-with-directive',\n template: \n <h2>Direktiflere Eri\u015fim<\/h2>\n <p appHighlight="lightblue" #myHighlightDirective>Bu metin vurgulanacak.<\/p>\n <button (click)="resetDirectiveHighlight()">Vurguyu S\u0131f\u0131rla<\/button>\n <\/code>\n})\nexport class ParentWithDirectiveComponent implements AfterViewInit {\n @ViewChild(HighlightDirective) highlightDirective!: HighlightDirective;\n\n resetDirectiveHighlight() {\n if (this.highlightDirective) {\n this.highlightDirective.resetHighlight();\n }\n }\n\n ngAfterViewInit() {\n console.log('Yakalanan direktif:', this.highlightDirective);\n }\n}<\/code><\/pre>\nappHighlight<\/code> direktifine sahip <\/p>\n#myHighlightDirective<\/code> referans\u0131n\u0131 verdik. @ViewChild(HighlightDirective)<\/code> dekorat\u00f6r\u00fc, bu direktifin ilk \u00f6rne\u011fini highlightDirective<\/code> \u00f6zelli\u011fine atar. resetDirectiveHighlight()<\/code> metodu t\u0131kland\u0131\u011f\u0131nda, yakalanan direktifin resetHighlight()<\/code> metodu \u00e7a\u011fr\u0131l\u0131r. Bu, direktifin kendi mant\u0131\u011f\u0131n\u0131 \u00fcst bile\u015fenden kontrol etmemize olanak tan\u0131r.<\/p>\nViewChild’\u0131n Geli\u015fmi\u015f Kullan\u0131m\u0131 ve Se\u00e7enekleri<\/h3>\n
1. Birden Fazla \u00d6\u011feyi Yakalama:
ViewChildren<\/code><\/h4>\nViewChildren<\/code> dekorat\u00f6r\u00fc devreye girer. ViewChildren<\/code>, se\u00e7iciyle e\u015fle\u015fen t\u00fcm \u00f6\u011feleri yakalar ve bunlar\u0131 bir QueryList<\/code> nesnesi olarak d\u00f6nd\u00fcr\u00fcr.<\/p>\n\/\/ list.component.ts\nimport { Component, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular\/core';\n\n@Component({\n selector: 'app-list',\n template: \n <h2>Liste Elemanlar\u0131<\/h2>\n <ul>\n <li #listItem>\u00d6\u011fe 1<\/li>\n <li #listItem>\u00d6\u011fe 2<\/li>\n <li #listItem>\u00d6\u011fe 3<\/li>\n <\/ul>\n <\/code>\n})\nexport class ListComponent implements AfterViewInit {\n @ViewChildren('listItem') listItems!: QueryList<ElementRef>;\n\n ngAfterViewInit() {\n console.log('Toplam liste \u00f6\u011fesi:', this.listItems.length);\n this.listItems.forEach((item: ElementRef, index: number) => {\n console.log(\u00d6\u011fe ${index + 1} metni:<\/code>, item.nativeElement.textContent);\n \/\/ \u00d6rnek olarak ilk \u00f6\u011feye farkl\u0131 bir stil uygulayal\u0131m\n if (index === 0) {\n item.nativeElement.style.fontWeight = 'bold';\n }\n });\n\n \/\/ QueryList dinamik olarak de\u011fi\u015febilir, bu y\u00fczden de\u011fi\u015fiklikleri dinlemek de m\u00fcmk\u00fcnd\u00fcr.\n this.listItems.changes.subscribe((newListItems: QueryList<ElementRef>) => {\n console.log('Liste de\u011fi\u015fti! Yeni \u00f6\u011fe say\u0131s\u0131:', newListItems.length);\n });\n }\n}<\/code><\/pre>\n#listItem<\/code> referans\u0131n\u0131 kullanan t\u00fcm <\/p>\nViewChildren<\/code> ile yakal\u0131yoruz. Sonu\u00e7, ElementRef<\/code>‘lerin bir QueryList<\/code>‘idir. QueryList<\/code>, bir dizi gibi davran\u0131r ve forEach<\/code>, map<\/code> gibi metotlara sahiptir. Ayr\u0131ca, template’teki de\u011fi\u015fiklikler sonucu liste de\u011fi\u015firse changes<\/code> olay\u0131 tetiklenir. Bu, dinamik olarak eklenen veya kald\u0131r\u0131lan \u00f6\u011feleri y\u00f6netmek i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.
\n2.
read<\/code> Se\u00e7ene\u011fi ile Farkl\u0131 Veri Tipleri Okuma<\/h4>\n@ViewChild<\/code> ve @ViewChildren<\/code> dekorat\u00f6rleri, iste\u011fe ba\u011fl\u0131 bir read<\/code> se\u00e7ene\u011fi sunar. Bu se\u00e7enek, yakalanan \u00f6\u011fenin hangi soyutlama seviyesinde d\u00f6nd\u00fcr\u00fclece\u011fini belirtmenizi sa\u011flar. Varsay\u0131lan olarak, bir bile\u015fen veya direktif yakalan\u0131rsa o bile\u015fen\/direktifin \u00f6rne\u011fi, bir DOM eleman\u0131 ise ElementRef<\/code> d\u00f6nd\u00fcr\u00fcl\u00fcr. Ancak read<\/code> se\u00e7ene\u011fi ile bu davran\u0131\u015f\u0131 de\u011fi\u015ftirebilirsiniz.<\/p>\nElementRef<\/code> olarak de\u011fil de do\u011frudan bile\u015fenin kendisi gibi yakalamak isteyebilirsiniz (bu genellikle ViewChild(ChildComponent)<\/code> ile yap\u0131l\u0131r, ancak read<\/code> se\u00e7ene\u011fi daha ince ayarlar i\u00e7in kullan\u0131l\u0131r). En yayg\u0131n kullan\u0131mlar\u0131ndan biri, bir TemplateRef<\/code>‘i yakalamakt\u0131r.<\/p>\n\/\/ template-ref-example.component.ts\nimport { Component, ViewChild, TemplateRef, AfterViewInit } from '@angular\/core';\n\n@Component({\n selector: 'app-template-ref-example',\n template: \n <h2>TemplateRef \u00d6rne\u011fi<\/h2>\n <ng-template #myTemplate let-name="name">\n <p>Merhaba, {{ name }}!<\/p>\n <\/ng-template>\n <button (click)="renderTemplate()">\u015eablonu G\u00f6ster<\/button>\n <\/code>\n})\nexport class TemplateRefExampleComponent implements AfterViewInit {\n @ViewChild('myTemplate', { read: TemplateRef }) myTemplateRef!: TemplateRef<any>;\n \/\/ @ViewChild('myTemplate') myTemplateRef!: TemplateRef<any>; \/\/ Bu da \u00e7al\u0131\u015f\u0131r, \u00e7\u00fcnk\u00fc ng-template i\u00e7in varsay\u0131lan okuma TemplateRef'tir\n\n renderedContent: any; \/\/ \u015eablonun render edildi\u011fi i\u00e7eri\u011fi tutacak\n\n renderTemplate() {\n if (this.myTemplateRef) {\n \/\/ TemplateRef'i bir ViewContainerRef'e ba\u011flayarak render edebiliriz.\n \/\/ Bu \u00f6rnekte basitlik i\u00e7in do\u011frudan DOM'a eklemiyoruz,\n \/\/ ancak ger\u00e7ek senaryolarda bir ViewContainerRef'e ihtiya\u00e7 duyulur.\n console.log('\u015eablon yakaland\u0131:', this.myTemplateRef);\n \/\/ Ger\u00e7ek bir render i\u015flemi i\u00e7in ViewContainerRef gerekir:\n \/\/ this.viewContainerRef.createEmbeddedView(this.myTemplateRef, { name: 'Angular' });\n }\n }\n\n ngAfterViewInit() {\n console.log('TemplateRef:', this.myTemplateRef);\n }\n}<\/code><\/pre>\nng-template<\/code> etiketini yakal\u0131yoruz. read: TemplateRef<\/code> se\u00e7ene\u011fi, bu \u015fablonun bir TemplateRef<\/code> nesnesi olarak d\u00f6nd\u00fcr\u00fclmesini sa\u011flar. TemplateRef<\/code>, dinamik olarak olu\u015fturulabilecek bir \u015fablonu temsil eder ve genellikle ViewContainerRef<\/code> ile birlikte kullan\u0131l\u0131r.<\/p>\nread<\/code> se\u00e7enekleri aras\u0131nda ElementRef<\/code>, ViewContainerRef<\/code>, Renderer2<\/code> gibi se\u00e7enekler bulunur. Bu, ViewChild’\u0131n hangi formatta veri d\u00f6nd\u00fcrece\u011fini belirlemenize olanak tan\u0131r.<\/p>\n3.
static<\/code> Se\u00e7ene\u011fi<\/h4>\n@ViewChild<\/code> dekorat\u00f6r\u00fcn\u00fcn bir di\u011fer \u00f6nemli se\u00e7ene\u011fi static<\/code>‘tir. Bu se\u00e7enek, yakalanacak \u00f6\u011fenin template’in hangi a\u015famas\u0131nda mevcut olaca\u011f\u0131n\u0131 belirtir.<\/p>\nstatic: false<\/code> (Varsay\u0131lan): Bu ayar, ViewChild’\u0131n, template’in dinamik olarak olu\u015fturulan veya *ngIf<\/code>, *ngFor<\/code> gibi yap\u0131sal direktifler taraf\u0131ndan kontrol edilen \u00f6\u011felerini yakalamas\u0131n\u0131 sa\u011flar. Bu \u00f6\u011feler, ilk render d\u00f6ng\u00fcs\u00fcnde hemen mevcut olmayabilir. Bu nedenle, static: false<\/code> ile yakalanan \u00f6\u011felere eri\u015fmek i\u00e7in genellikle ngAfterViewInit<\/code> ya\u015fam d\u00f6ng\u00fcs\u00fc hook’unu kullanmal\u0131s\u0131n\u0131z.
\n* static: true<\/code>: Bu ayar, ViewChild’\u0131n, template’in statik olarak mevcut olan \u00f6\u011felerini (yani *ngIf<\/code> veya *ngFor<\/code> i\u00e7inde olmayan, her zaman render edilen) yakalamas\u0131n\u0131 sa\u011flar. Bu durumda, yakalanan \u00f6\u011felere ngOnInit<\/code> ya\u015fam d\u00f6ng\u00fcs\u00fc hook’unda eri\u015filebilir hale gelir. Ancak, static: true<\/code> kullanmak, performans sorunlar\u0131na veya hatalara yol a\u00e7abilir, \u00e7\u00fcnk\u00fc ngOnInit<\/code> s\u0131ras\u0131nda DOM hen\u00fcz tam olarak olu\u015fturulmam\u0131\u015f olabilir. Bu nedenle, static: true<\/code>‘yu yaln\u0131zca \u00f6\u011fenin ger\u00e7ekten statik oldu\u011fundan ve ngOnInit<\/code>‘te eri\u015filebilir oldu\u011fundan emin oldu\u011funuzda kullanmal\u0131s\u0131n\u0131z.<\/p>\nstatic: false<\/code> varsay\u0131lan oldu\u011fu i\u00e7in ve \u00e7o\u011fu senaryoda daha g\u00fcvenli oldu\u011fu i\u00e7in bunu tercih etmek iyi bir pratiktir. Yaln\u0131zca belirli bir performans optimizasyonu i\u00e7in veya \u00f6\u011fenin ngOnInit<\/code>‘te kesinlikle mevcut olaca\u011f\u0131ndan emin oldu\u011funuz durumlarda static: true<\/code>‘yu kullanmal\u0131s\u0131n\u0131z.<\/p>\n
\n* \u00c7\u00f6z\u00fcm:<\/strong> @ViewChild<\/code> ve ElementRef<\/code> kullanarak input alanlar\u0131n\u0131 yakalar\u0131z. Kullan\u0131c\u0131 ad\u0131 input’unun (change)<\/code> veya (keyup)<\/code> olay\u0131nda, bir metot tetiklenir. Bu metot, @ViewChild<\/code> ile yakalanan \u015fifre input’unun nativeElement.focus()<\/code> metodunu \u00e7a\u011f\u0131r\u0131r.<\/p>\nProductCardComponent<\/code>), ana liste bile\u015feninde (ProductListComponent<\/code>) dinamik olarak render ediliyor. Ana bile\u015fen, bir \u00fcr\u00fcn\u00fcn sepete eklendi\u011fini \u00f6\u011frendi\u011finde, ilgili \u00fcr\u00fcn kart\u0131 bile\u015feninin durumunu g\u00fcncellemek istiyor.<\/p>\n@Output<\/code> ile her \u00fcr\u00fcn kart\u0131ndan ana bile\u015fene olay g\u00f6ndermek mant\u0131ks\u0131z olabilir.
\n* \u00c7\u00f6z\u00fcm:<\/strong> ProductListComponent<\/code>, ProductCardComponent<\/code>‘leri bir *ngFor<\/code> d\u00f6ng\u00fcs\u00fc ile render ederken, her ProductCardComponent<\/code> \u00f6rne\u011fini @ViewChildren<\/code> ile yakalayabilir. Ard\u0131ndan, sepete ekleme i\u015flemi ger\u00e7ekle\u015fti\u011finde, ilgili ProductCardComponent<\/code> \u00f6rne\u011finin bir metodu \u00e7a\u011fr\u0131larak durumu g\u00fcncellenir.<\/p>\n\/\/ product-card.component.ts\nimport { Component, Input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-card',\n template: \n <div [style.border]="isInCart ? '2px solid green' : '1px solid gray'">\n <h3>{{ product.name }}<\/h3>\n <p>{{ product.price | currency }}<\/p>\n <button (click)="addToCart()">Sepete Ekle<\/button>\n <p *ngIf="isInCart" style="color: green;">Sepetinizde!<\/p>\n <\/div>\n <\/code>\n})\nexport class ProductCardComponent {\n @Input() product: any;\n isInCart: boolean = false;\n\n addToCart() {\n this.isInCart = true;\n console.log(${this.product.name} sepete eklendi.<\/code>);\n \/\/ Bu bile\u015fenin ana bile\u015fene bir olay g\u00f6ndermesi gerekebilir\n \/\/ veya ana bile\u015fen bu durumu ViewChild ile yakalayabilir.\n }\n\n updateCartStatus(status: boolean) {\n this.isInCart = status;\n }\n}\n\n\/\/ product-list.component.ts\nimport { Component, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular\/core';\nimport { ProductCardComponent } from '.\/product-card.component';\n\n@Component({\n selector: 'app-product-list',\n template: \n <h1>\u00dcr\u00fcnler<\/h1>\n <div *ngFor="let prod of products; let i = index">\n <app-product-card #productCard [product]="prod"><\/app-product-card>\n <\/div>\n <button (click)="checkCartStatus()">Sepet Durumunu Kontrol Et<\/button>\n <\/code>\n})\nexport class ProductListComponent implements AfterViewInit {\n products = [\n { id: 1, name: 'Laptop', price: 1200 },\n { id: 2, name: 'Mouse', price: 25 },\n { id: 3, name: 'Keyboard', price: 75 }\n ];\n\n \/\/ ViewChildren ile t\u00fcm productCard bile\u015fenlerini yakala\n @ViewChildren(ProductCardComponent) productCards!: QueryList<ProductCardComponent>;\n\n checkCartStatus() {\n console.log('Sepet durumlar\u0131 kontrol ediliyor...');\n \/\/ \u00d6rnek: 1. \u00fcr\u00fcn\u00fc sepete eklenmi\u015f gibi i\u015faretle\n if (this.productCards && this.productCards.length > 0) {\n const firstProductCard = this.productCards.toArray()[0]; \/\/ QueryList'ten ilk \u00f6\u011feyi al\n firstProductCard.updateCartStatus(true);\n console.log(\u0130lk \u00fcr\u00fcn\u00fcn durumu g\u00fcncellendi.<\/code>);\n }\n }\n\n ngAfterViewInit() {\n console.log('Toplam \u00fcr\u00fcn kart\u0131:', this.productCards.length);\n }\n}<\/code><\/pre>\nProductListComponent<\/code>, ProductCardComponent<\/code>‘leri yakalamak i\u00e7in @ViewChildren(ProductCardComponent)<\/code> kullan\u0131r. checkCartStatus<\/code> metodu \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, yakalanan QueryList<\/code> i\u00e7inden ilgili ProductCardComponent<\/code>‘e eri\u015filir ve updateCartStatus<\/code> metodu \u00e7a\u011fr\u0131larak g\u00f6rsel durum g\u00fcncellenir. Bu, bile\u015fenler aras\u0131nda do\u011frudan, ama kontroll\u00fc bir etkile\u015fim sa\u011flar.<\/p>\nngAfterViewInit<\/code> Kullan\u0131m\u0131:<\/strong> Daha \u00f6nce de belirtti\u011fimiz gibi, @ViewChild<\/code> ile yakalanan \u00f6\u011felere eri\u015fmek i\u00e7in genellikle ngAfterViewInit<\/code> ya\u015fam d\u00f6ng\u00fcs\u00fc hook’u en g\u00fcvenli yerdir. \u00d6zellikle static: false<\/code> kullan\u0131ld\u0131\u011f\u0131nda, template’in i\u015flenmesi ve DOM’un olu\u015fturulmas\u0131 bu hook’ta tamamlanm\u0131\u015f olur. ngOnInit<\/code>‘te eri\u015fmeye \u00e7al\u0131\u015fmak, \u00f6\u011fenin hen\u00fcz mevcut olmamas\u0131 nedeniyle hatalara yol a\u00e7abilir.
\n* static: true<\/code>‘nun S\u0131n\u0131rl\u0131 Kullan\u0131m\u0131:<\/strong> static: true<\/code> se\u00e7ene\u011fi, yaln\u0131zca template’in o b\u00f6l\u00fcm\u00fcn\u00fcn ngOnInit<\/code>‘te kesinlikle mevcut olaca\u011f\u0131ndan emin oldu\u011funuzda kullan\u0131lmal\u0131d\u0131r. Yap\u0131sal direktifler (*ngIf<\/code>, *ngFor<\/code>) taraf\u0131ndan kontrol edilen \u00f6\u011feler i\u00e7in static: true<\/code> kullanmak genellikle yanl\u0131\u015ft\u0131r ve hatalara neden olur.
\n* QueryList<\/code>‘in Dinamik Do\u011fas\u0131:<\/strong> @ViewChildren<\/code> ile elde edilen QueryList<\/code> dinamiktir. Yani, *ngFor<\/code> d\u00f6ng\u00fcs\u00fcndeki \u00f6\u011feler eklendi\u011finde veya kald\u0131r\u0131ld\u0131\u011f\u0131nda QueryList<\/code> g\u00fcncellenir. Bu de\u011fi\u015fiklikleri dinlemek i\u00e7in QueryList<\/code>‘in changes<\/code> \u00f6zelli\u011fini kullanabilirsiniz. Bu, \u00f6zellikle dinamik olarak de\u011fi\u015fen listelerle \u00e7al\u0131\u015f\u0131rken \u00f6nemlidir.
\n* ElementRef<\/code> Manip\u00fclasyonlar\u0131nda Dikkatli Olun:<\/strong> ElementRef.nativeElement<\/code> arac\u0131l\u0131\u011f\u0131yla do\u011frudan DOM manip\u00fclasyonu yapmak, uygulaman\u0131z\u0131n platform ba\u011f\u0131ms\u0131zl\u0131\u011f\u0131n\u0131 zedeleyebilir. M\u00fcmk\u00fcn oldu\u011funca Angular’\u0131n soyutlamalar\u0131n\u0131 (Renderer2 gibi) kullanmaya \u00e7al\u0131\u015f\u0131n. Ancak, focus()<\/code> gibi baz\u0131 DOM metotlar\u0131 i\u00e7in nativeElement<\/code>‘e eri\u015fim ka\u00e7\u0131n\u0131lmaz olabilir.
\n* \u0130simlendirme Konvansiyonlar\u0131:<\/strong> ViewChild ile yakalanan \u00f6zellikler i\u00e7in anlaml\u0131 isimler kullan\u0131n. \u00d6rne\u011fin, bir input alan\u0131n\u0131 yakal\u0131yorsan\u0131z myInputRef<\/code> yerine usernameInput<\/code> gibi daha a\u00e7\u0131klay\u0131c\u0131 bir isim tercih edin.
\n* undefined<\/code> veya null<\/code> Kontrolleri:<\/strong> ViewChild ile yakalanan \u00f6\u011feler, template’in belirli bir noktas\u0131nda hen\u00fcz mevcut olmayabilir. Bu nedenle, bu \u00f6zelliklere eri\u015fmeden \u00f6nce her zaman if (this.myProperty)<\/code> gibi kontroller yapman\u0131z \u00f6nerilir. TypeScript’in non-null assertion operator (!<\/code>) bu kontrolleri atlaman\u0131za izin verir ancak bu, \u00f6\u011fenin kesinlikle mevcut olaca\u011f\u0131 anlam\u0131na gelmez ve \u00e7al\u0131\u015fma zaman\u0131 hatalar\u0131na yol a\u00e7abilir. Bu nedenle, \u00f6zellikle ba\u015flang\u0131\u00e7ta undefined<\/code> olabilecek durumlarda dikkatli olmak \u00f6nemlidir.
\n* Alternatifleri G\u00f6z \u00d6n\u00fcnde Bulundurun:<\/strong> ViewChild, bile\u015fenler aras\u0131 ileti\u015fim i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7 olsa da, her zaman en iyi \u00e7\u00f6z\u00fcm olmayabilir. @Input<\/code> ve @Output<\/code> dekorat\u00f6rleri, servisler (RxJS Subject’ler ile) veya EventEmitter<\/code> gibi daha deklaratif ileti\u015fim mekanizmalar\u0131n\u0131 da g\u00f6z \u00f6n\u00fcnde bulundurun. ViewChild genellikle daha do\u011frudan ve bazen daha az “Angular-vari” bir \u00e7\u00f6z\u00fcm olarak g\u00f6r\u00fclebilir.
\n* Test Edilebilirlik:<\/strong> ViewChild kullanan bile\u015fenleri test etmek, do\u011frudan DOM veya alt bile\u015fenlere ba\u011f\u0131ml\u0131l\u0131klar nedeniyle biraz daha karma\u015f\u0131k olabilir. Testlerinizde mock’lar ve stub’lar kullanarak bu ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00f6netmeniz gerekebilir.<\/p>\nSonu\u00e7<\/h3>\n
ViewChildren<\/code> ile birden fazla \u00f6\u011feyi yakalama, read<\/code> se\u00e7ene\u011fi ile veri tiplerini belirleme ve static<\/code> se\u00e7ene\u011fi ile ya\u015fam d\u00f6ng\u00fcs\u00fc entegrasyonunu y\u00f6netme gibi geli\u015fmi\u015f \u00f6zellikleri sayesinde karma\u015f\u0131k UI senaryolar\u0131n\u0131 kolayca \u00e7\u00f6zebilirsiniz.<\/p>\nngAfterViewInit<\/code> ya\u015fam d\u00f6ng\u00fcs\u00fc hook’unu tercih etmek, static: true<\/code> kullan\u0131m\u0131nda dikkatli olmak, QueryList<\/code>‘in dinamik do\u011fas\u0131n\u0131 anlamak ve DOM manip\u00fclasyonlar\u0131nda Angular’\u0131n soyutlamalar\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak gibi en iyi pratikleri takip etmek, daha sa\u011flam ve s\u00fcrd\u00fcr\u00fclebilir kod yazman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n@Input<\/code>, @Output<\/code> ve servis tabanl\u0131 ileti\u015fim gibi di\u011fer y\u00f6ntemler de projenizin ihtiya\u00e7lar\u0131na g\u00f6re de\u011ferlendirilmelidir. ViewChild’\u0131 ne zaman ve nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 anlamak, Angular geli\u015ftirme becerilerinizi bir \u00fcst seviyeye ta\u015f\u0131yacakt\u0131r.<\/p>\nS\u0131k\u00e7a Sorulan Sorular<\/h4>\n
\n Genellikle ngAfterViewInit<\/code> ya\u015fam d\u00f6ng\u00fcs\u00fc hook’unda eri\u015febilirsiniz. static: true<\/code> kullan\u0131ld\u0131\u011f\u0131nda ise ngOnInit<\/code>‘te de eri\u015fim m\u00fcmk\u00fcn olabilir, ancak bu durum daha nadirdir ve dikkat gerektirir.
\n* *ngIf<\/code> ile gizlenmi\u015f bir \u00f6\u011feyi ViewChild ile yakalayabilir miyim?<\/strong>
\n Evet, *ngIf<\/code> ile gizlenmi\u015f bir \u00f6\u011feyi yakalamak i\u00e7in @ViewChild<\/code>‘\u0131 static: false<\/code> (varsay\u0131lan) ile kullanmal\u0131s\u0131n\u0131z. \u00d6\u011fenin DOM’da mevcut oldu\u011fu zaman ngAfterViewInit<\/code>‘te eri\u015filebilir olacakt\u0131r.
\n* Ayn\u0131 template’te birden fazla kez kullan\u0131lan bir bile\u015feni ViewChild ile nas\u0131l yakalar\u0131m?<\/strong>
\n E\u011fer sadece ilk \u00f6rne\u011fi istiyorsan\u0131z @ViewChild(ChildComponent)<\/code> kullanabilirsiniz. E\u011fer t\u00fcm \u00f6rnekleri yakalamak istiyorsan\u0131z @ViewChildren(ChildComponent)<\/code> kullanarak bir QueryList<\/code> elde edersiniz.
\n* ViewChild kullanmak Angular’\u0131n performans\u0131n\u0131 etkiler mi?<\/strong>
\n ViewChild’\u0131n kendisi do\u011frudan performans sorunlar\u0131na neden olmaz. Ancak, gere\u011finden fazla veya yanl\u0131\u015f kullan\u0131ld\u0131\u011f\u0131nda (\u00f6rne\u011fin, s\u00fcrekli DOM manip\u00fclasyonu), dolayl\u0131 olarak performans d\u00fc\u015f\u00fc\u015flerine yol a\u00e7abilir. Optimizasyon i\u00e7in do\u011fru ya\u015fam d\u00f6ng\u00fcs\u00fc hook’lar\u0131n\u0131 ve yakalama stratejilerini kullanmak \u00f6nemlidir.
\n* ViewChild ile yakalad\u0131\u011f\u0131m bir DOM eleman\u0131n\u0131n stilini nas\u0131l de\u011fi\u015ftirebilirim?<\/strong>
\n ElementRef<\/code> ile yakalad\u0131\u011f\u0131n\u0131z DOM eleman\u0131n\u0131n nativeElement<\/code> \u00f6zelli\u011fini kullanarak do\u011frudan stilini de\u011fi\u015ftirebilirsiniz: