Cila është ndryshimi midis ViewChild dhe ContentChild?

Question

Accepted Answer

Të dyja kërkojnë për referenca ndaj elementeve/komponenteve fëmijësh, por ato shikojnë në **vende të ndryshme**: **`@ViewChild`** kërkon në *template-in e vet të komponentës*, ndërsa **`@ContentChild`** kërkon në përmbajtje të **projektuar në** komponentë nëpërmjet ``. ## @ViewChild — kërkoje template-in tënd ```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` hyrje në elemente/komponente që vetë komponenta deklarohet në template-in e saj — e disponueshme në **`ngAfterViewInit`**. ## @ContentChild — kërkoje përmbajtjen e projektuar ```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` hyrje në përmbajtje që **prindi dërgoi** (e projektuar nëpërmjet ``) — e disponueshme në **`ngAfterContentInit`**. ## Dallimi kryesor ```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) ``` ## Versionet në shumës ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Kërkesa modernja të signaleve ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Pse është e rëndësishme Dallimi i `@ViewChild` (template-in tënd) nga `@ContentChild` (përmbajtje e projektuar) — dhe kohëzgjatja e tyre të ciklut të jetës (`ngAfterViewInit` kundrejt `ngAfterContentInit`) — është thelbësor kur ndërtohen komponente të ripërdorshueshme që duhet të bashkëveprojnë me elementet e tyre të template-it ose me përmbajtjen që konsumatorët projektojnë në to. Është një pikë e zakonshme konfuzioni dhe një nevojë e shpeshtë kur autorizoni biblioteka komponentesh, taba, kontrole formularesh dhe mbështetëse që duhet të koordinojnë me elementet fëmijë.