ორივე ეძებს ბავშვი ელემენტებ/კომპონენტებზე მითითებებს, მაგრამ ღებულობენ სხვადსხვა ადგილებში: @ViewChild ითხოვს კომპონენტის საკუთარი template-ს, ხოლო ითხოვს კომპონენტში კონტენტი -ის მეშვეობით.
ორივე ეძებს ბავშვი ელემენტებ/კომპონენტებზე მითითებებს, მაგრამ ღებულობენ სხვადსხვა ადგილებში: @ViewChild ითხოვს კომპონენტის საკუთარი template-ს, ხოლო ითხოვს კომპონენტში კონტენტი -ის მეშვეობით.
@ContentChild<ng-content>@Component({
template: `
<input #nameInput /> <!-- a template reference in MY template -->
<app-child></app-child>
`,
})
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-ში.
@Component({
selector: "app-card",
template: `<div class="card"><ng-content></ng-content></div>`, // 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);
}
}
<!-- parent projects content INTO app-card -->
<app-card>
<app-card-title>Hello</app-card-title> <!-- this is what ContentChild finds -->
</app-card>
@ContentChild ჯდება კონტენტს, რომელსაც მშობელი გადაიტანა (დაპროექტებული <ng-content>-ის მეშვეობით) — ხელმისაწვდომი ngAfterContentInit-ში.
@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)
@ViewChildren(ItemComponent) items!: QueryList<ItemComponent>; // all matching items
ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); }
input = viewChild<ElementRef>("nameInput"); // signal-based query (newer Angular)
@ViewChild-ის (თქვენი template) @ContentChild-სგან განსხვავება (დაპროექტებული კონტენტი) — და მათი შესაბამისი lifecycle timings (ngAfterViewInit vs ngAfterContentInit) — აუცილებელია, როდესაც აგებთ ხელახლა გამოყენებადი კომპონენტებს, რომლებმაც უნდა ურთიერთქმედება თავიანთი საკუთარი template ელემენტებთან ან მათში მომხმარებლების მიერ დაპროექტებულ კონტენტთან.
ეს კომპონენტის ბიბლიოთეკების, tab-ების, form controls-ის და wrapper-ების შემუშავებისას გაკლევის წერტილი და ხშირი სჭირდება, რომლებმაც უნდა კოორდინაცია ზეთ ბავშვი ელემენტებთან.
IT გასაუბრების კითხვების ბიბლიოთეკა დეტალური პასუხებით — Junior-დან Senior-მდე.
შემოწირულობა