Qual è la differenza tra ViewChild e ContentChild?

Question

Accepted Answer

Entrambi cercano riferimenti a elementi/componenti figlio, ma guardano in **posti diversi**: **`@ViewChild`** interroga il *proprio template* del componente, mentre **`@ContentChild`** interroga il contenuto **proiettato in** il componente tramite ``. ## @ViewChild — interroga il tuo 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` accede a elementi/componenti che il componente stesso dichiara nel suo template — disponibile in **`ngAfterViewInit`**. ## @ContentChild — interroga il contenuto proiettato ```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` accede al contenuto che il **genitore ha passato** (proiettato tramite ``) — disponibile in **`ngAfterContentInit`**. ## La distinzione chiave ```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) ``` ## Versioni al plurale ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Query di segnale moderno ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Perché è importante Distinguere `@ViewChild` (il tuo template) da `@ContentChild` (il contenuto proiettato) — e i loro rispettivi tempi di ciclo di vita (`ngAfterViewInit` vs `ngAfterContentInit`) — è essenziale quando si costruiscono componenti riutilizzabili che devono interagire con elementi del loro template o con il contenuto che i consumatori proiettano in essi. È un punto di confusione comune ed un'esigenza frequente quando si creano librerie di componenti, tab, controlli di moduli e wrapper che devono coordinare con elementi figlio.