| الخاصية (Property) | الوظيفة الأساسية | الاستخدام العملي |
|---|---|---|
| selector | يحدد اسم العلامة المخصصة (HTML Tag) التي ستُستخدم لاستدعاء المكون داخل القوالب الأخرى | يُكتب عادة ببادئة مثل app- لمنع التعارض مع وسوم HTML القياسية (مثال: <app-navbar>) |
| standalone | يؤكد لإطار العمل أن المكون مستقل ذاتياً (تأخذ القيمة true) | تمثل حجر الأساس في معمارية Angular 22.1 للاستغناء عن الـ NgModules |
| imports | مصفوفة تسجل كل ما يعتمد عليه المكون من مكتبات أو مكونات أخرى | استيراد NgIf، NgFor، أو مكونات أخرى مثل ButtonComponent |
| template / templateUrl | يربط الكلاس بقالب الـ HTML سواء كان كوداً مدمجاً أو ملفاً خارجياً | تحديد الهيكل المرئي الذي سيعرض بيانات الكلاس للمستخدم |
| styles / styleUrl (أو styleUrls) | يربط الكلاس بملفات التنسيق (CSS/SCSS) لضمان تطبيق الأنماط على هذا المكون فقط | تخصيص ألوان وتصميم المكون بشكل معزول (Encapsulated) |
نصل الآن إلى الدرس الرابع في فصل المكونات المستقلة. في هذا الدرس، سنسلط الضوء على "العقل المدبر" لأي مكون في أنجولر: المزخرف @Component. في لغة TypeScript، الكلاس (Class) بمفرده لا يعني شيئاً لإطار العمل؛ والمزخرف هو الأداة التي تضيف "البيانات الوصفية" (Metadata) إلى هذا الكلاس لتخبر Angular 22.1 بكيفية التعامل معه، أين يجد ملفاته، وما هي تبعياته للعمل كجزء من واجهة المستخدم.
بدون المزخرف، لا يختلف الكلاس الذي تكتبه عن أي كلاس جافاسكربت عادي. عندما تضع @Component({...}) فوق تعريف الكلاس مباشرة، فإنك تمرر كائن إعدادات (Configuration Object) يقوم بتغليف الكلاس بخصائص أنجولر السحرية.
في الإصدارات القديمة، كانت الخصائص مثل styleUrls تأخذ مصفوفة من المسارات. في الإصدارات الحديثة (بما فيها 22.1)، تم تبسيطها لتصبح styleUrl (مفردة) وتقبل نصاً (String) مباشراً إذا كان هناك ملف تنسيق واحد، مما يجعل الكود أكثر نظافة وقابلية للقراءة.
هذا المثال يوضح كيف تتضافر جميع الخصائص الأساسية لتكوين مكون جاهز للعمل يعتمد على مكونات خارجية لتكوين واجهته:
| 1 | import { Component } from '@angular/core'; |
| 2 | // استيراد المكونات التي سيعتمد عليها هذا المكون |
| 3 | import { HeaderComponent } from '../header/header.component'; |
| 4 | import { FooterComponent } from '../footer/footer.component'; |
| 5 | |
| 6 | // المزخرف يبدأ بالرمز @ ويوضع مباشرة فوق الكلاس |
| 7 | @Component({ |
| 8 | selector: 'app-main-layout', // اسم المكون عند الاستخدام في HTML |
| 9 | standalone: true, // التصريح بالاستقلالية |
| 10 | imports: [HeaderComponent, FooterComponent], // التبعيات |
| 11 | templateUrl: './main-layout.component.html', // مسار ملف الـ HTML |
| 12 | styleUrl: './main-layout.component.scss' // مسار ملف الـ SCSS |
| 13 | }) |
| 14 | export class MainLayoutComponent { |
| 15 | // هنا يتم كتابة المنطق البرمجي، ولن يتعرف عليه أنجولر لولا المزخرف أعلاه |
| 16 | layoutTitle: string = 'اللوحة الرئيسية'; |
| 17 | } |