Beide vragen referenties naar onderliggende elementen/components op, maar kijken naar : zoekt in de van de component, terwijl zoekt naar inhoud die de component is via .
Beide vragen referenties naar onderliggende elementen/components op, maar kijken naar : zoekt in de van de component, terwijl zoekt naar inhoud die de component is via .
@ViewChild@ContentChild<ng-content>Het onderscheiden van @ViewChild (uw template) van @ContentChild (geprojecteerde inhoud) — en hun respectievelijke lifecycle-timing (ngAfterViewInit vs ngAfterContentInit) — is essentieel bij het bouwen van herbruikbare componenten die moeten interageren met hun eigen template-elementen of de inhoud die consumers erin projecteren.
Het is een veelvoorkomend verwarringsmoment en een frequent behoefte bij het schrijven van component-bibliotheken, tabbladen, formulierbesturingselementen en wrappers die moeten coördineren met onderliggende elementen.
@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 geeft toegang tot elementen/componenten die de component zelf in zijn template declareert — beschikbaar in ngAfterViewInit.
@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 geeft toegang tot inhoud die de bovenliggende component heeft doorgegeven (geprojecteerd via <ng-content>) — beschikbaar in ngAfterContentInit.
@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)
Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Doneren