Mi a különbség a ViewChild és a ContentChild között?

Question

Accepted Answer

Mindkettő gyermek elemekre/komponensekre vonatkozó referenciákat keres, de **különböző helyeken** keresnek: a **`@ViewChild`** a komponens *saját template-jét* kérdezi le, míg a **`@ContentChild`** a komponensbe az `` -en keresztül **vetített** tartalmat kérdezi le. ## @ViewChild — saját template lekérdezése ```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 } } ``` A `@ViewChild` olyan elemekhez/komponensekhez fér hozzá, amelyeket a komponens maga deklarál a template-jében — a **`ngAfterViewInit`** -ben érhető el. ## @ContentChild — vetített tartalom lekérdezése ```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

``` A `@ContentChild` olyan tartalomhoz fér hozzá, amelyet a **szülő továbbított** (az `` -en keresztül vetítve) — a **`ngAfterContentInit`** -ben érhető el. ## A legfontosabb megkülönböztetés ```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) ``` ## Többes szám verzió ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Modern signal lekérdezések ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Miért fontos A `@ViewChild` (saját template) és a `@ContentChild` (vetített tartalom) megkülönböztetése — valamint azok megfelelő életciklus-időzítése (`ngAfterViewInit` vs `ngAfterContentInit`) — lényeges az újrafelhasználható komponensek építésekor, amelyeknek interakcióba kell lépniük saját template elemei vagy a fogyasztók által bevetített tartalom. Ez egy gyakori zavaros pont és egy gyakori szükséglet komponenskönyvtárak, tabulátorok, űrlapvezérlők és burkolók szerzésekor, amelyeknek össze kell hangolniuk a gyermekelemekkel.