18. التعامل مع مدخلات المستخدم (متغيرات الإشارة إلى القالب)
بالإضافة إلى ربط الأحداث، يوفر Angular متغيرات الإشارة إلى القالب (template reference variables) للوصول المباشر إلى عناصر DOM أو مثيلات المكونات (component instances) داخل القالب.
ما هو متغير الإشارة إلى القالب؟
يتم الإعلان عن متغير الإشارة إلى القالب باستخدام علامة الهاش (#) متبوعة باسم المتغير (على سبيل المثال، #usernameInput). وعادةً ما يشير إلى عنصر DOM الذي تم تعريفه عليه.
مثال: الوصول إلى قيمة الإدخال
يمكننا استخدام متغير الإشارة إلى القالب لتجاوز ربط الأحداث إذا كنا نحتاج فقط إلى القيمة النهائية عند وقوع حدث النقر.
html
<button (click)="saveData(userInput.value)">Save
فئة المكون:
typescript export class InputSaverComponent { savedName: string = '';
saveData(inputVal: string) {
this.savedName = inputVal;
console.log(Saved: ${this.savedName});
}
}
الإشارة إلى NgModel أو مثيل مكون
إذا تم تحديد متغير الإشارة على عنصر يستضيف توجيه Angular (مثل ngModel) أو مكون، فإن متغير الإشارة يشير إلى مثيل هذا التوجيه أو المكون، وليس مجرد عنصر DOM.
html <input type="email" #emailControl="ngModel" [(ngModel)]="userEmail">
Email is required!
هنا، يحمل #emailControl مثيل NgModel، مما يسمح لنا بالوصول إلى خصائص حالته الحاسمة للتحقق من صحة النموذج (form validation).