Ποια είναι η διαφορά μεταξύ ViewChild και ContentChild;

Question

Accepted Answer

Και οι δύο δίνουν ερωτήματα για αναφορές σε στοιχεία/συστατικά θυγατρικών, αλλά αναζητούν σε **διαφορετικά σημεία**: **`@ViewChild`** δίνει ερώτημα στο *δικό του πρότυπο του συστατικού*, ενώ **`@ContentChild`** δίνει ερώτημα στο περιεχόμενο **που προβάλλεται σε** το συστατικό μέσω ``. ## @ViewChild — δίνε ερώτημα στο δικό σου πρότυπο ```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` έχει πρόσβαση σε στοιχεία/συστατικά που το ίδιο το συστατικό δηλώνει στο πρότυπό του — διαθέσιμο στο **`ngAfterViewInit`**. ## @ContentChild — δίνε ερώτημα στο προβληθέν περιεχόμενο ```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` έχει πρόσβαση στο περιεχόμενο που **πέρασε το γονικό συστατικό** (προβάλλεται μέσω ``) — διαθέσιμο στο **`ngAfterContentInit`**. ## Η κύρια διάκριση ```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) ``` ## Πληθυντικές εκδόσεις ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Σύγχρονα ερωτήματα σήματος ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Γιατί έχει σημασία Η διάκριση μεταξύ `@ViewChild` (το πρότυπό σου) και `@ContentChild` (προβληθέν περιεχόμενο) — και των αντίστοιχων χρονισμών κύκλου ζωής τους (`ngAfterViewInit` vs `ngAfterContentInit`) — είναι απαραίτητη κατά την δημιουργία επαναχρησιμοποιήσιμων συστατικών που πρέπει να αλληλεπιδράσουν είτε με τα δικά τους στοιχεία προτύπων είτε με το περιεχόμενο που προβάλλουν οι καταναλωτές σε αυτά. Είναι ένα συνηθισμένο σημείο σύγχυσης και μια συχνή ανάγκη κατά τη σύνταξη βιβλιοθηκών συστατικών, καρτών, στοιχείων ελέγχου φορμών και wrapper που πρέπει να συντονιστούν με θυγατρικά στοιχεία.