ViewChild ve ContentChild arasındaki fark nedir?

Question

Accepted Answer

Her ikisi de alt öğeler/bileşenlere referans için sorgulama yapan, ancak **farklı yerlerde** arama yapan: **`@ViewChild`** bileşenin *kendi şablonunda* arama yapar, **`@ContentChild`** ise `` aracılığıyla bileşene **yansıtılan** içeriğinde arama yapar. ## @ViewChild — kendi şablonunuz sorgulayın ```ts @Component({ template: ` `, }) export class ParentComponent implements AfterViewInit { @ViewChild("nameInput") input!: ElementRef; // by template ref @ViewChild(ChildComponent) child!: ChildComponent; // by component type ngAfterViewInit() { this.input.nativeElement.focus(); // available after the VIEW initializes this.child.doSomething(); // call a child component's method } } ``` `@ViewChild` bileşenin kendi şablonunda bildirildiği öğelere/bileşenlere erişir — **`ngAfterViewInit`**'te mevcut. ## @ContentChild — yansıtılan içeriği sorgulayın ```ts @Component({ selector: "app-card", template: `

`, // content projected here }) export class CardComponent implements AfterContentInit { @ContentChild(CardTitleComponent) title!: CardTitleComponent; ngAfterContentInit() { // the projected content is ready here (EARLIER than ngAfterViewInit) console.log(this.title); } } ``` ```html

Hello

``` `@ContentChild` **ana bileşenin geçtiği** içeriğe erişir (`` aracılığıyla yansıtılan) — **`ngAfterContentInit`**'te mevcut. ## Temel ayrım ```text @ViewChild → elements in THIS component's own template → ngAfterViewInit @ContentChild → elements PROJECTED in from the parent → ngAfterContentInit (plural: @ViewChildren / @ContentChildren return a QueryList of all matches) ``` ## Çoğul versiyonları ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Modern sinyal sorguları ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Neden önemli `@ViewChild` (kendi şablonunuz) ile `@ContentChild` (yansıtılan içerik) arasında ayrım yapılması — ve bunların ilgili yaşam döngüsü zamanlaması (`ngAfterViewInit` vs `ngAfterContentInit`) — kendi şablon öğeleriyle veya tüketicilerin içlerine yansıttığı içerikle etkileşim kurmesi gereken yeniden kullanılabilir bileşenler oluştururken önemlidir. Bu, bileşen kütüphaneleri, sekmeler, form kontrolleri ve alt öğelerle koordinasyon yapması gereken sarmalayıcılar yazarken yaygın bir karışıklık noktası ve sık ihtiyaç.