Her ikisi de alt öğeler/bileşenlere referans için sorgulama yapan, ancak farklı yerlerde arama yapan: @ViewChild bileşenin kendi şablonunda arama yapar, ise aracılığıyla bileşene içeriğinde arama yapar.
Her ikisi de alt öğeler/bileşenlere referans için sorgulama yapan, ancak farklı yerlerde arama yapan: @ViewChild bileşenin kendi şablonunda arama yapar, ise aracılığıyla bileşene içeriğinde arama yapar.
@ContentChild<ng-content>@Component({
template: `
<input #nameInput /> <!-- a template reference in MY template -->
<app-child></app-child>
`,
})
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.
@Component({
selector: "app-card",
template: `<div class="card"><ng-content></ng-content></div>`, // 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);
}
}
<!-- parent projects content INTO app-card -->
<app-card>
<app-card-title>Hello</app-card-title> <!-- this is what ContentChild finds -->
</app-card>
@ContentChild ana bileşenin geçtiği içeriğe erişir (<ng-content> aracılığıyla yansıtılan) — ngAfterContentInit'te mevcut.
@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)
@ViewChildren(ItemComponent) items!: QueryList<ItemComponent>; // all matching items
ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); }
input = viewChild<ElementRef>("nameInput"); // signal-based query (newer Angular)
@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ç.