Cad é an difríochtaí idir ViewChild agus ContentChild?

Question

Accepted Answer

Déanann an bheirt iad ag fiosrú tagairtí do eilimintí/chomhpháirt leanaí, ach breathnaíonn siad i **láithreacha éagsúla**: déanann **`@ViewChild`** fiosrú ar *theampláid an chomhpháirt féin*, agus déanann **`@ContentChild`** fiosrú ar an ábhar **intuigthe isteach sa** chomhpháirt trí ``. ## @ViewChild — do theampláid féin a fhiosrú ```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 } } ``` Tugann `@ViewChild` rochtain ar eilimintí/chomhpháirt a dhéanann an chomhpháirt féin a dhearbhú ina teampláid — ar fáil in **`ngAfterViewInit`**. ## @ContentChild — ábhar intuigthe a fhiosrú ```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

``` Tugann `@ContentChild` rochtain ar an ábhar a **sheol an tuismitheoir isteach** (intuigthe trí ``) — ar fáil in **`ngAfterContentInit`**. ## An príomhdhifríochtaí ```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) ``` ## Leaganacha iolra ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Fiosraí comhartha nua-aimseartha ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Cén fáth a bhfuil sé tábhachtach Bheith ábalta `@ViewChild` (do theampláid) a dhéanamh idirdhealaithe ó `@ContentChild` (ábhar intuigthe) — agus a n-am-líne timthriall beatha faoi seach (`ngAfterViewInit` vs `ngAfterContentInit`) — tá sé riachtanach nuair a bhíonn tú ag tógáil comhpháirteanna in-athúsáideach ar gá dóibh a bheith ag idirghníomhú le heilimintí a bhíonn dá dteampláid féin nó an t-ábhar a bhíonn na tomhaltóirí ag socrú isteach iontu. Is pointe mearbhaill choitianta agus riachtanas minic ann nuair atá tú ag cur tógála ar leabharlanna comhpháirteanna, tabhais, rialúchán fhoirmeacha agus foluain ar chaoi ar chóir dóibh a bheith ag teagmháil le heilimintí leanaí.