كيفية اختيار عنصر في قالب مكون Angular: دليل كامل مع TypeScript

لماذا لا يعمل document.querySelector في Angular؟

تخيل: أنت تكتب أول تطبيق لك في Angular، وتحتاج إلى الوصول إلى <div> عادي أو <input> مباشرة في قالب المكون. أول فكرة تتبادر إلى ذهنك هي استخدام document.querySelector الجيد القديم. ولكن المشكلة: في وحدة التحكم — null أو undefined. هل هذا مألوف؟

Angular ليس مجرد مكتبة للتعامل مع DOM. إنه إطار عمل يعمل مع تجريده الخاص فوق DOM الحقيقي. الوصول المباشر إلى العناصر عبر المحددات العامة ينتهك بنية الإطار، وقد يؤدي إلى تسرب الذاكرة ومشاكل في الأداء. لكن السبب الرئيسي هو أن Angular يستخدم DOM الافتراضي و Shadow DOM (اعتمادًا على استراتيجية التغليف)، لذلك فإن document.querySelector الخاص بك ببساطة لا يرى العناصر داخل المكون.

لحسن الحظ، وفر مطورو Angular حلاً أنيقًا — مزينات ViewChild و ViewChildren. في هذه المقالة، سنشرح كيفية اختيار العناصر بشكل صحيح في قالب المكون باستخدام TypeScript، وسنناقش جميع المخاطر المحتملة.

الطرق الأساسية للوصول إلى عناصر القالب

في Angular، هناك ثلاث طرق رئيسية لاختيار العناصر في قالب المكون:

\n
• مراجع القوالب (Template Reference Variables) — أبسط طريقة للوصول السريع
\n
• المزين ViewChild — للوصول إلى عنصر أو مكون واحد
\n
• المزين ViewChildren — للوصول إلى مجموعة من العناصر المتشابهة
\n

كل من هذه الطرق لها خصائصها وتستخدم في سيناريوهات مختلفة. دعنا ننظر إليها بالتفصيل.

1. مراجع القوالب: أسرع طريقة

مراجع القوالب هي "اختراق" من Angular يسمح لك بالوصول إلى عنصر DOM مباشرة في القالب، دون الحاجة إلى كتابة كود في فئة المكون. كل ما عليك فعله هو وضع #اسمالمرجع على العنصر المطلوب.

// component.html\n<input #myInput type="text" placeholder="أدخل النص">\n<button (click)="focusInput(myInput)">تركيز على الإدخال</button>

في هذا المثال، #myInput هو مرجع قالب. يقوم تلقائيًا بإنشاء متغير يمكن تمريره إلى دوال المكون. لاحظ: نحن نمرر العنصر نفسه، وليس قيمته.

// component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: './example.component.html'\n})\nexport class ExampleComponent {\n  focusInput(inputElement: HTMLInputElement): void {\n    inputElement.focus();\n    inputElement.style.borderColor = '#4CAF50';\n  }\n}

نقطة مهمة: مراجع القوالب متاحة فقط داخل القالب. لا يمكنك استخدامها مباشرة في فئة المكون. لهذا تحتاج إلى المزينات.

2. ViewChild: الوصول إلى عنصر واحد

المزين @ViewChild هو الأداة الرئيسية للوصول إلى عنصر أو مكون فرعي من فئة المكون. يعمل بناءً على المحدد: يمكنك البحث بواسطة مرجع القالب، أو حسب نوع المكون، أو حسب محدد CSS (مع قيود).

// component.ts\nimport { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  template: `\n    <div #myDiv>هذا العنصر سنختاره</div>\n    <p #myParagraph>وهذا أيضًا</p>\n  `\n})\nexport class ExampleComponent implements AfterViewInit {\n  @ViewChild('myDiv') myDiv!: ElementRef;\n  @ViewChild('myParagraph') myParagraph!: ElementRef;\n\n  ngAfterViewInit(): void {\n    // مهم! الوصول إلى العناصر ممكن فقط بعد تهيئة العرض\n    console.log(this.myDiv.nativeElement.textContent); // "هذا العنصر سنختاره"\n    this.myPara