| معيار المقارنة الهندسية | الخصائص الداخلية (Internal Properties) | المدخلات القادمة من الأب (@Input API) |
|---|---|---|
| مصدر البيانات وقيمتها | تُعرَّف وتُدار بالكامل داخل صنف المكون الحالي | تُستقبل وتُجلب حصرياً من المكون الأب الخارجي |
| إمكانية التعديل والتغيير | تُعدل بحرية داخل المكون عبر الدوال أو الأساليب البرمجية | تُعتبر للقراءة فقط داخل المكون الفرعي غالباً للحفاظ على تدفق البيانات |
| التوثيق والاعتمادية | تخص المكون وحده ولا تتأثر بالخارج | تعتمد على استقبال الخصائص عبر القوالب باستخدام الأقواس المربعة ([property]) |
نواصل التقدم في الفصل السابع من المنهاج الهندسي لأحدث إصدارات Angular 22.1، لنتناول في هذا الدرس الثاني استقبال البيانات من المكون الأب باستخدام المدخلات. في العمارة التقليدية لأنجولر، يُعد مزخرف المدخلات (@Input) الأداة الأساسية لاستقبال البيانات والخصائص القادمة من المكونات الأب إلى المكونات الفرعية، مما يتيح بناء واجهات قابلة لإعادة الاستخدام ومرنة للغاية.
يتيح مزخرف @Input() للمكون الفرعي فتح منافذ استقبال تربط بياناته بمتغيرات المكون الأب. عندما تتغير القيمة في الأب، تنعكس تلقائياً داخل الابن عبر دورة حياة المكون.
يمكن تهيئة المدخلات بقيم افتراضية أو جعلها مطلوبة لمنع الأخطاء البرمجية وضمان تمرير البيانات الحيوية بدقة عند إنشاء المكون.
| 1 | import { Component, Input } from '@angular/core'; |
| 2 | |
| 3 | @Component({ |
| 4 | selector: 'app-user-profile-card', |
| 5 | standalone: true, |
| 6 | templateUrl: './user-profile-card.component.html', |
| 7 | styleUrl: './user-profile-card.component.css' |
| 8 | }) |
| 9 | export class UserProfileCardComponent { |
| 10 | // استقبال اسم المستخدم من المكون الأب بالطريقة التقليدية |
| 11 | @Input() userName: string = 'مستخدم غير معروف'; |
| 12 | @Input() userRole: string = 'زائر'; |
| 13 | } |
| 1 | <div class="profile-card"> |
| 2 | <h4>بطاقة بيانات المستخدم الفرعية</h4> |
| 3 | <p>اسم المستخدم: <strong>{{ userName }}</strong></p> |
| 4 | <p>الدور الوظيفي: <span class="role-badge">{{ userRole }}</span></p> |
| 5 | </div> |
| 1 | .profile-card { |
| 2 | background: #1e293b; |
| 3 | color: #f8fafc; |
| 4 | padding: 16px; |
| 5 | border-radius: 8px; |
| 6 | border: 1px solid #334155; |
| 7 | margin-top: 10px; |
| 8 | } |
| 9 | |
| 10 | .role-badge { |
| 11 | background: #0284c7; |
| 12 | color: white; |
| 13 | padding: 2px 8px; |
| 14 | border-radius: 4px; |
| 15 | font-size: 0.9rem; |
| 16 | } |
| 1 | import { Component } from '@angular/core'; |
| 2 | import { UserProfileCardComponent } from './user-profile-card.component'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-main-dashboard', |
| 6 | standalone: true, |
| 7 | imports: [UserProfileCardComponent], |
| 8 | template: ` |
| 9 | <div class="dashboard"> |
| 10 | <h3>لوحة القيادة الرئيسية (الأب)</h3> |
| 11 | |
| 12 | <!-- تمرير البيانات للابن باستخدام الأقواس المربعة --> |
| 13 | <app-user-profile-card |
| 14 | [userName]="currentUser" |
| 15 | [userRole]="currentRole"> |
| 16 | </app-user-profile-card> |
| 17 | </div> |
| 18 | ` |
| 19 | }) |
| 20 | export class MainDashboardComponent { |
| 21 | currentUser = 'أحمد المهندس'; |
| 22 | currentRole = 'مطور برمجيات رئيسي'; |
| 23 | } |