X'inhu d-differenza bejn ViewChild u ContentChild?

Question

Accepted Answer

Iż-żewg iqarqu għal referenzi għal elementi/komponenti tat-tfal, imma jqallbu f'**postijiet differenti**: **`@ViewChild`** jikkwesta t-template *tiegħu stess* tal-komponent, filwaqt li **`@ContentChild`** jikkwesta l-kontenut **improggettata ġewwa** il-komponent permezz ta' ``. ## @ViewChild — ikekkes it-template tiegħek stess ```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` jaċċessa elementi/komponenti li l-komponent innifsu jiddikjara fit-template tiegħu — disponibbli f' **`ngAfterViewInit`**. ## @ContentChild — ikekkes il-kontenut improggettata ```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` jaċċessa l-kontenut li l-**ġenitur tiegħu għadda** (improggettata permezz ta' ``) — disponibbli f' **`ngAfterContentInit`**. ## Id-distinzjoni ewlenija ```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) ``` ## Verżjonijiet plural ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Interrogazzjonijiet signal moderni ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Għaliex dan importanti Tiddistingwi `@ViewChild` (it-template tiegħek) minn `@ContentChild` (il-kontenut improggettata) — u l-ħinijiet tad-darbiet tal-ħajja rispettivi (`ngAfterViewInit` vs `ngAfterContentInit`) — essenzjali meta tinbena komponenti li jistgħu jerġgħu jintużaw li jeħtieġu jinterattisku mieħu ma 'elementi tal-template tiegħem stess jew ma' l-kontenut li l-konsumaturi projettaw ġewwahom. Di punt ta' konfużjoni komuni u ħtieġa frewenti meta tikteb libreriji ta' komponenti, tabs, kontrolli tal-formoli, u wrappers li għandu jinkoordinaw ma' elementi tat-tfal.