كلاهما يستعلم عن مراجع العناصر/المكونات الفرعية، لكنهما يبحثان في أماكن مختلفة: @ViewChild يستعلم عن القالب الخاص بالمكون، بينما @ContentChild يستعلم عن المحتوى المكون عبر .
كلاهما يستعلم عن مراجع العناصر/المكونات الفرعية، لكنهما يبحثان في أماكن مختلفة: @ViewChild يستعلم عن القالب الخاص بالمكون، بينما @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 يدخل إلى العناصر/المكونات التي يعلنها المكون نفسه في قالبه — متاح في 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 (قالبك) و @ContentChild (المحتوى المسقط) — وتوقيت دورة حياتهما على التوالي (ngAfterViewInit مقابل ngAfterContentInit) — أمر ضروري عند بناء مكونات قابلة لإعادة الاستخدام تحتاج للتفاعل مع عناصر قالبها أو المحتوى الذي يسقطه المستهلكون فيها.
إنها نقطة التباس شائعة واحتياج متكرر عند تأليف مكتبات المكونات والتبويبات وعناصر التحكم بالنماذج والمغلفات التي يجب أن تنسق مع العناصر الفرعية.
مكتبة من أسئلة مقابلات تقنية المعلومات مع إجابات مفصّلة — من المبتدئ إلى المتقدم.
تبرع