68. ViewChild و ContentChild

عندما يحتاج المكون إلى وصول برمجي إلى العناصر أو المكونات المعروضة داخل عرضه الخاص (DOM المحلي) أو المحتوى المسقط (ng-content)، نستخدم @ViewChild و @ContentChild.

1. @ViewChild (الوصول إلى العرض المحلي)

يُستخدم ViewChild@ بواسطة مكون للحصول على إشارة إلى عنصر DOM أو مكون/توجيه يتم عرضه في قالبه الخاص.

حالة الاستخدام: تعيين التركيز على إدخال، أو الوصول إلى أسلوب في مكون ابن ضمن القالب الحالي.

typescript // parent.component.ts import { ViewChild, ElementRef, AfterViewInit } from '@angular/core';

export class ParentComponent implements AfterViewInit {

// 1. تحديد عنصر DOM المُعلَّم بـ #nameInput @ViewChild('nameInput') nameInputRef: ElementRef | undefined;

// 2. لا يمكننا الوصول إلى عناصر العرض إلا بعد تشغيل ngAfterViewInit ngAfterViewInit(): void { if (this.nameInputRef) { // الوصول إلى عنصر DOM الأصلي واستدعاء focus() this.nameInputRef.nativeElement.focus(); } } }

html

<input type="text" #nameInput>

2. @ContentChild (الوصول إلى المحتوى المسقط)

يُستخدم ContentChild@ للحصول على إشارة إلى عنصر أو مكون تم تمريره إلى المكون عبر إسقاط المحتوى (<ng-content>).

حالة الاستخدام: تحتاج حاوية مكون إلى معرفة ما إذا كان عنصر مسقط محدد (مثل رأس مطلوب) موجوداً.

typescript // container.component.ts (المكون الذي يحتوي على ) import { ContentChild, ElementRef, AfterContentInit } from '@angular/core';

export class ContainerComponent implements AfterContentInit {

// البحث عن العنصر الذي يحتوي على فئة CSS .header-title في المحتوى المسقط @ContentChild('.header-title') headerRef: ElementRef | undefined;

ngAfterContentInit(): void { console.log('Projected header found?', !!this.headerRef); } }

الاختلاف الرئيسي في التوقيت: يتوفر @ContentChild في ngAfterContentInit. ويتوفر @ViewChild في ngAfterViewInit.