რა განსხვავებაა ViewChild-სა და ContentChild-ის შორის?

Question

Accepted Answer

ორივე ეძებს ბავშვი ელემენტებ/კომპონენტებზე მითითებებს, მაგრამ ღებულობენ **სხვადსხვა ადგილებში**: **`@ViewChild`** ითხოვს კომპონენტის *საკუთარი template*-ს, ხოლო **`@ContentChild`** ითხოვს კომპონენტში **დაპროექტებული** კონტენტი ``-ის მეშვეობით. ## @ViewChild — თქვენი საკუთარი template-ის ჩაკითხვა ```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` ჯდება ელემენტებ/კომპონენტებს, რომლებსაც კომპონენტი თავად აცხადებს მის template-ში — ხელმისაწვდომი **`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(...); } ``` ## თანამედროვე signal queries ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## რატომ მნიშვნელოვანი `@ViewChild`-ის (თქვენი template) `@ContentChild`-სგან განსხვავება (დაპროექტებული კონტენტი) — და მათი შესაბამისი lifecycle timings (`ngAfterViewInit` vs `ngAfterContentInit`) — აუცილებელია, როდესაც აგებთ ხელახლა გამოყენებადი კომპონენტებს, რომლებმაც უნდა ურთიერთქმედება თავიანთი საკუთარი template ელემენტებთან ან მათში მომხმარებლების მიერ დაპროექტებულ კონტენტთან. ეს კომპონენტის ბიბლიოთეკების, tab-ების, form controls-ის და wrapper-ების შემუშავებისას გაკლევის წერტილი და ხშირი სჭირდება, რომლებმაც უნდა კოორდინაცია ზეთ ბავშვი ელემენტებთან.