Yukar\u0131da vermi\u015f oldu\u011fumuz \u00f6rneklerin kimin de false<\/em> kimin de ise true<\/em> olarak set etti\u011fimiz static<\/code> parametresinin ne i\u015fe yarad\u0131\u011f\u0131n\u0131 muhtemelen merak etmi\u015fsinizdir. O halde hemen a\u00e7\u0131klayal\u0131m…<\/p>\n

static<\/code> parametresi, ViewChild ile referans edilen nesnenin sayfan\u0131n initialize edildi\u011fi andan beri mevcut olup olmad\u0131\u011f\u0131n\u0131 ifade eder. Bu parametreye false<\/em> de\u011feri verildi\u011fi taktide Angular’\u0131n ilgili nesneyi sayfan\u0131n y\u00fcklenmesinden sonra arayaca\u011f\u0131n\u0131 yani bir ba\u015fka deyi\u015fle belirli ko\u015fullara g\u00f6re ba\u011f\u0131ml\u0131 olaca\u011f\u0131n\u0131 ifade etmi\u015f oluyoruz. Bu durumda da ilgili nesneyi ancak ngAfterViewInit<\/code> event’in de elde edebiliyoruz. Yok e\u011fer true<\/em> de\u011ferini verirseniz bu sefer de ilgili nesnenin sayfan\u0131n y\u00fcklenmesinin en ba\u015f\u0131ndan beri mevcut oldu\u011funu s\u00f6ylemi\u015f oluyoruz. Haliyle ngOnInit<\/code> event’i \u00fczerinden eri\u015fim g\u00f6sterebiliyoruz.<\/p>\n

\n\r\nexport class HomeComponent implements OnInit, AfterViewInit {\r\n @ViewChild("childComponent", { static: true }) childComponent: ChildComponent;\r\n\r\n .\r\n .\r\n .\r\n\r\n ngOnInit(): void {\r\n console.log("OnInit", this.childComponent)\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n console.log("AfterViewInit", this.childComponent)\r\n }\r\n\r\n}\r\n<\/pre>\n<\/div>\nYukar\u0131daki gibi static<\/code> parametresini true<\/em> ve false<\/em> de\u011ferleriyle test edersek e\u011fer ilgili event’lerin eri\u015fim durumunu a\u015fa\u011f\u0131daki g\u00f6rsellerden g\u00f6zlemleyebiliriz.<\/p>\n\n\n\n\n\ntrue<\/th>\n false<\/th>\n<\/tr>\n<\/thead>\n <\/a><\/td>\n <\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nViewChild – Multiple Instance<\/h5>\nViewChild ile referans etmek istedi\u011fimiz HTML yahut component farketmeksizin herhangi bir \u00f6\u011fenin sayfa \u00fczerinde birden fazla instance’\u0131 varsa e\u011fer bu durumda ilk nesne i\u015faretlenecektir.<\/p>\n \u015e\u00f6yle ki;<\/p>\n\n\r\n.\r\n.\r\n.\r\n template: `\r\n <button (click)="increment()">Increment<\/button>\r\n <button (click)="decrement()">Decrement<\/button>\r\n <p>Ge\u00e7erli say\u0131 : {{childComponent.count}}<\/p>\r\n <app-child #childComponent><\/app-child>\r\n <app-child #childComponent><\/app-child>\r\n `\r\n.\r\n.\r\n.\r\n<\/pre>\n<\/div>\nYukar\u0131daki \u00f6rnekte birden fazla ‘childComponent’ template variable’a kar\u015f\u0131l\u0131k gelen ‘ChildComponent’ tan\u0131mlamas\u0131 bulunmaktad\u0131r. \u00d6nceki sat\u0131rlarda ‘ViewChild’ ile sadece ilk component’in referans edilece\u011fi s\u00f6ylendi\u011fi \u00fczere bu \u00e7al\u0131\u015fma neticesinde a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcndeki gibi bir davran\u0131\u015f s\u00f6z konusu olacakt\u0131r. \n<\/a><\/p>\n ViewChild – Read Option<\/h5>\nViewChild ile referans edilen \u00f6\u011feler birden fazla t\u00fcrle ili\u015fkilendirilerek daha efektif bir \u015fekilde y\u00f6netilebilmektedir. \u015e\u00f6yle ki;<\/p>\n\n\r\n@Component({\r\n selector: 'app-home',\r\n template: `\r\n <input type="text" #txtInput [(ngModel)]="txt">\r\n `\r\n})\r\nexport class HomeComponent implements OnInit {\r\n @ViewChild("txtInput", { static: true, read: ElementRef }) txtInput: ElementRef;\r\n\r\n txt: string;\r\n .\r\n .\r\n .\r\n}\r\n<\/pre>\n<\/div>\nYukar\u0131da \u00f6rnek ama\u00e7l\u0131 tan\u0131mlanm\u0131\u015f olan input nesnesi ‘#txtInput’ template variable’\u0131 ile i\u015faretlendi\u011fi gibi biryandan da [(ngModel)]<\/code> direktifini kullanarak two way data binding \u00f6zelli\u011fini kullanmaktad\u0131r. Yani bizler bu nesneyi bir element oldu\u011fu i\u00e7in ElementRef<\/code> ile, [(ngModel)]<\/code>‘\u0131 kulland\u0131\u011f\u0131 i\u00e7in NgModel<\/code> ile veya bir view container oldu\u011fu i\u00e7in de ViewContainerRef<\/code> t\u00fcr\u00fcyle ili\u015fkilendirerek referans edebiliriz. E\u011fer ki bu nesneyi a\u015fa\u011f\u0131daki gibi direkt ViewChild ile referans edersek default olarak ElementRef<\/code> t\u00fcr\u00fcnden elde ediyor olaca\u011f\u0131z.<\/p>\n\n\r\n @ViewChild("txtInput", { static: true }) txtInput;\r\n<\/pre>\n<\/div>\nE\u011fer ilgili objeyi farkl\u0131 t\u00fcrlerle elde etmek istiyorsan\u0131z a\u015fa\u011f\u0131daki gibi read<\/code> parametresini kullanarak bu i\u015flemi ger\u00e7ekle\u015ftirebilirsiniz.<\/p>\n\n\r\n @ViewChild("txtInput", { static: true, read: ElementRef }) txtInput: ElementRef;\r\n<\/pre>\n<\/div>\n\n\r\n @ViewChild("txtInput", { static: true, read: NgModel }) txtInput: NgModel;\r\n<\/pre>\n<\/div>\n\n\r\n @ViewChild("txtInput", { static: true, read: ViewContainerRef }) txtInput: ViewContainerRef;\r\n<\/pre>\n<\/div>\nAngular’da her \u00f6\u011fenin ElementRef<\/code> ve ViewContainerRef<\/code> ile ili\u015fkilendirilebildi\u011fini ve e\u011fer ilgili \u00f6\u011fe bir direktif yahut component ise o t\u00fcrlerle de referans edilebildi\u011fini bilmenizde fayda vard\u0131r.<\/p>\n read<\/code> parametresinin bir di\u011fer i\u015flevi ise child component’ten bir provider’\u0131 inject etmemizi sa\u011flamas\u0131d\u0131r. Hemen \u00f6rneklendirmemiz gerekirse e\u011fer;<\/p>\n Child Component:<\/p>\n \n\r\nimport { Component } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-child',\r\n template: `\r\n <h4>Child Component<\/h4>\r\n `,\r\n providers: [{ provide: 'Example Provider', useValue: 'Example Value' }]\r\n})\r\nexport class ChildComponent {\r\n\r\n}\r\n<\/pre>\n<\/div>\nBak\u0131n, g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere child component’te ‘Example Provider’ isminde bir provider tan\u0131mlanm\u0131\u015ft\u0131r.<\/p>\n Home Component:<\/p>\n \n\r\nimport { Component, OnInit, ViewChild } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-home',\r\n template: `\r\n <app-child #child><\/app-child>\r\n `\r\n})\r\nexport class HomeComponent implements OnInit {\r\n @ViewChild("child", { static: true, read: 'Example Provider' }) exampleProvider: string;\r\n\r\n txt: string;\r\n\r\n ngOnInit(): void {\r\n console.log("OnInit", this.exampleProvider)\r\n }\r\n}\r\n<\/pre>\n<\/div>\nHome component’te ise ViewChild<\/code> ile ‘child’ referans edilmekte lakin read<\/code> de\u011ferine child component’te ki provider’\u0131n ad\u0131 verilerek esas\u0131nda bu provider’\u0131n de\u011feri elde edilmi\u015f olunmaktad\u0131r.<\/a><\/p>\n ViewChildren<\/h4>\nViewChild, sayfada ilgili \u00f6\u011feden ka\u00e7 tane olursa olsun e\u015fle\u015fecek olan ilk nesneyi, tek olarak referans etmektedir. ViewChildren ise verilen \u00f6\u011fenin t\u00fcm\u00fcn\u00fc QueryList<\/code> olarak elde etmemizi sa\u011flayan bir dekorat\u00f6rd\u00fcr.<\/p>\n\n\r\nimport { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-home',\r\n template: `\r\n <app-child #child><\/app-child>\r\n <app-child #child><\/app-child>\r\n <app-child #child><\/app-child>\r\n <app-child #child><\/app-child>\r\n `\r\n})\r\nexport class HomeComponent implements AfterViewInit {\r\n @ViewChildren("child") childs: QueryList<ElementRef>;\r\n\r\n ngAfterViewInit(): void {\r\n console.log("AfterViewInit", this.childs)\r\n }\r\n}\r\n<\/pre>\n<\/div>\n<\/a>ViewChildren, syntax’\u0131 gere\u011fi static<\/code> parametresi bar\u0131nd\u0131rmad\u0131\u011f\u0131 i\u00e7in referans etti\u011fi \u00f6\u011felere ngOnInit<\/code> event’i i\u00e7erisinden eri\u015filememekte, sadece ngAfterViewInit<\/code> event’inden eri\u015filebilmektedir.<\/p>\n ViewChildren – Read Option<\/h5>\nNas\u0131l ki ViewChild dekorat\u00f6r\u00fcnde read<\/code> option’\u0131 child component’in provider’\u0131n\u0131 inject etmemizi sa\u011flamakta, benzer mant\u0131kla ViewChildren dekorat\u00f6r\u00fc de child component’lerin provider’lar\u0131n\u0131 inject ederek k\u00fcm\u00fclatif olarak elde etmemize imkan tan\u0131maktad\u0131r. Bunun i\u00e7in a\u015fa\u011f\u0131daki \u00f6rne\u011fi incelersek e\u011fer;<\/p>\n\n\r\nimport { Component } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-child',\r\n template: `\r\n <h4>Child Component<\/h4>\r\n `,\r\n providers: [{ provide: 'Example Provider', useValue: 'Example Value - Child' }]\r\n})\r\nexport class ChildComponent {\r\n\r\n}\r\n<\/pre>\n<\/div>\n\n\r\n@Component({\r\n selector: 'app-child2',\r\n template: ``,\r\n providers: [{ provide: 'Example Provider', useValue: 'Example Value - Child 2' }]\r\n})\r\nexport class Child2Component {\r\n\r\n}\r\n<\/pre>\n<\/div>\n\n\r\n@Component({\r\n selector: 'app-child3',\r\n template: ``,\r\n providers: [{ provide: 'Example Provider', useValue: 'Example Value - Child 3' }]\r\n})\r\nexport class Child3Component {\r\n\r\n}\r\n<\/pre>\n<\/div>\nYukar\u0131da g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere ‘Child’, ‘Child2’ ve ‘Child3’ component’leri tan\u0131mlanm\u0131\u015f ve her component’te farkl\u0131 value’lara kar\u015f\u0131l\u0131k gelen ‘Example Provider’ key’inde provider olu\u015fturulmu\u015ftur. \u015eimdi bu provider’lar\u0131 a\u015fa\u011f\u0131daki gibi ayn\u0131 template variable ile i\u015faretleyerek ViewChildren<\/code> dekorat\u00f6r\u00fcyle QueryList olarak elde edebilir ve read<\/code> option’\u0131 ile de hepsinin provider de\u011ferlerini okuyarak elde edebiliriz.<\/p>\n\n\r\nimport { AfterViewInit, Component, ElementRef, QueryList, ViewChildren } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-home',\r\n template: `\r\n <app-child #child><\/app-child>\r\n <app-child2 #child><\/app-child2>\r\n <app-child3 #child><\/app-child3>\r\n `\r\n})\r\nexport class HomeComponent implements AfterViewInit {\r\n @ViewChildren("child", { read: "Example Provider" }) childs: QueryList<ElementRef>;\r\n\r\n ngAfterViewInit(): void {\r\n console.log("AfterViewInit", this.childs)\r\n }\r\n}\r\n<\/pre>\n<\/div>\n<\/a><\/p>\n QueryList<\/h4>\nViewChildren dekorat\u00f6r\u00fc neticesinde QueryList t\u00fcr\u00fcnden elde edilen \u00f6\u011felerin sayfaya eklenip kald\u0131r\u0131ld\u0131\u011f\u0131na dair bilgi edinebilmek i\u00e7in changes<\/code> property’sine subscribe olarak s\u00fcreci takipte bulunabiliriz.<\/p>\n Misal olarak ngIf<\/code> direktifiyle ilgili \u00f6\u011felerin visible \u00f6zelli\u011fine a\u015fa\u011f\u0131daki gibi kontrol getirebilir ve her de\u011fi\u015fiklik durumunda tetiklenecek olan changes<\/code> property’sinden \u00f6\u011felerin son durumuna dair bilgi alabiliriz.<\/p>\n\n\r\nimport { AfterViewInit, Component, ElementRef, QueryList, ViewChildren } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-home',\r\n template: `\r\n <h1 #element>A<\/h1>\r\n <h1 *ngIf="visible" #element>B<\/h1>\r\n <h1 *ngIf="visible" #element>C<\/h1>\r\n\r\n <button (click)="visibleComponents()">Show<\/button>\r\n `\r\n})\r\nexport class HomeComponent implements AfterViewInit {\r\n @ViewChildren("element", {}) childs: QueryList<ElementRef>;\r\n\r\n visible: boolean;\r\n\r\n ngAfterViewInit(): void {\r\n console.log("AfterViewInit", this.childs)\r\n this.childs.changes.subscribe({\r\n next: (data) => {\r\n console.log(data)\r\n }\r\n });\r\n }\r\n\r\n visibleComponents() {\r\n this.visible = !this.visible;\r\n }\r\n}\r\n<\/pre>\n<\/div>\n<\/a><\/p>\n Directive \u0130le \u0130\u015faretlenmi\u015f \u00d6\u011feleri Elde Etme<\/h4>\nSon olarak, herhangi bir direktif ile i\u015faretledi\u011fimiz \u00f6\u011feleri ‘ViewChild’ ile nas\u0131l elde edebilece\u011fimizi konu\u015fmakta fayda g\u00f6rmekteyim. Bunun i\u00e7in a\u015fa\u011f\u0131daki \u00f6rnek \u00e7al\u0131\u015fmay\u0131 inceleyebilirsiniz.<\/p>\n Custom Directive:<\/p>\n\n\r\nimport { Directive, ElementRef } from '@angular\/core';\r\n\r\n@Directive({\r\n selector: '[appEx]'\r\n})\r\nexport class ExDirective {\r\n\r\n constructor(public elementRef: ElementRef) { }\r\n\r\n}\r\n<\/pre>\n<\/div>\nYukar\u0131daki custom directive kodlar\u0131n\u0131 incelerseniz e\u011fer i\u015faretleyece\u011fi HTML \u00f6\u011fesini kar\u015f\u0131layabilmesi i\u00e7in access modifier’\u0131 ‘public’ ve t\u00fcr\u00fc ‘ElementRef’ olan bir parametre bar\u0131nd\u0131rmaktad\u0131r.<\/p>\n \u015eimdi bu directive ile ‘ViewChild’\u0131 birlikte a\u015fa\u011f\u0131daki gibi kullanabiliriz.<\/p>\n\n\r\nimport { Component, ElementRef, OnInit, ViewChild } from '@angular\/core';\r\nimport { ExDirective } from '..\/ex.directive';\r\n\r\n@Component({\r\n selector: 'app-home',\r\n template: `\r\n <h1 appEx>...<\/h1>\r\n `\r\n})\r\nexport class HomeComponent implements OnInit {\r\n @ViewChild(ExDirective, { static: true }) ex: ExDirective;\r\n\r\n ngOnInit(): void {\r\n console.log(this.ex.elementRef)\r\n }\r\n}\r\n<\/pre>\n<\/div>\n<\/a>Direktif ile yap\u0131lan bu manevray\u0131 kulland\u0131\u011f\u0131m\u0131z Angular\u2019da Dynamic Component Loading<\/a> ba\u015fl\u0131kl\u0131 makalemizi ayr\u0131 bir \u00f6rnek olmas\u0131 a\u00e7\u0131s\u0131ndan kaynak olarak de\u011ferlendirebilece\u011finizi s\u00f6ylerek i\u00e7eri\u011fimizi burada noktalayal\u0131m derim \ud83d\ude42<\/p>\n \u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle… \nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere… \n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":" Merhaba, Bu i\u00e7eri\u011fimizde Angular mimarisinde, DOM nesnelerine kar\u015f\u0131l\u0131k referans olu\u015fturmak i\u00e7in kullan\u0131lan ViewChild ve ViewChildren dekorat\u00f6rleriyle birlikte bu nesneleri koleksiyonel olarak elde etmemizi sa\u011flayan QueryList decorat\u00f6r\u00fcn\u00fcn i\u015flevlerini inceliyor olaca\u011f\u0131z. ViewChild ViewChild dekorat\u00f6r\u00fc, DOM’da ilk...<\/p>\n","protected":false},"author":1,"featured_media":3014,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420],"tags":[4650,4729,4728,4727],"class_list":["post-25909","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-viewchild","tag-angular-component","tag-querylist","tag-viewchildren"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25909","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=25909"}],"version-history":[{"count":15,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25909\/revisions"}],"predecessor-version":[{"id":25934,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25909\/revisions\/25934"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/3014"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=25909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=25909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=25909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

ViewChild – Multiple Instance<\/h5>\nViewChild ile referans etmek istedi\u011fimiz HTML yahut component farketmeksizin herhangi bir \u00f6\u011fenin sayfa \u00fczerinde birden fazla instance’\u0131 varsa e\u011fer bu durumda ilk nesne i\u015faretlenecektir.<\/p>\n\u015e\u00f6yle ki;<\/p>\n