Care este diferența dintre ViewChild și ContentChild?

Question

Accepted Answer

Ambele interogează referințe către elemente/componente copii, dar caută în **locuri diferite**: **`@ViewChild`** interogează *propriul template* al componentei, în timp ce **`@ContentChild`** interogează conținut **proiectat în** componentă prin ``. ## @ViewChild — interogați propriul template ```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` accesează elementele/componentele pe care componenta însuși le declară în template-ul ei — disponibil în **`ngAfterViewInit`**. ## @ContentChild — interogați conținutul proiectat ```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` accesează conținutul pe care **părintele l-a trimis** (proiectat prin ``) — disponibil în **`ngAfterContentInit`**. ## Distincția principală ```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) ``` ## Versiuni la plural ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Interogări moderne cu semnale ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## De ce este important Distingerea dintre `@ViewChild` (propriul template) și `@ContentChild` (conținut proiectat) — și cronologia lor respectivă a ciclului de viață (`ngAfterViewInit` vs `ngAfterContentInit`) — este esențială atunci când construiești componente reutilizabile care trebuie să interacționeze cu propriile elemente de template sau cu conținutul pe care consumatorii îl proiectează în ele. Acesta este un punct comun de confuzie și o nevoie frecventă la crearea bibliotecilor de componente, file, controale de formular și wrappers care trebuie să se coordoneze cu elementele copii.