أساسيات Angular 9 للمبتدئين: المكونات (Components) والربط النصي (String Interpolation)

Updated يونيو 16, 2026 5 min read

Aldawsari

دقائق القراءة: 5

في عالم تطوير الويب الحديث، يفضل العديد من المطورين بناء واجهة المستخدم (UI) للمواقع والتطبيقات بطريقة تعتمد على المكونات (components). هذا النهج مدعوم بقوة من قبل جميع أطر العمل الحديثة، ويعتبر فهم كيفية عمل المكونات وكيفية استخدامها خطوة أساسية وكبيرة في رحلة تعلم Angular.

في هذا المقال، سنتعمق في مفهوم مكونات Angular، وسنتعلم كيفية إنشاء واستخدام المكونات في مشاريعك، بالإضافة إلى استكشاف ماهية الربط النصي (String Interpolation) وكيفية الاستفادة منه. سأتناول أيضًا ميزات أخرى مهمة في Angular في مقالاتي القادمة ضمن هذه السلسلة:

الجزء الأول: كيفية تثبيت تطبيقك الأول باستخدام Angular CLI
الجزء الثاني: مكونات Angular والربط النصي (String Interpolation) (أنت هنا الآن)
الجزء الثالث: التوجيهات (Directives) و الأنابيب (Pipes) في Angular
الجزء الرابع: الربط أحادي الاتجاه للبيانات (One-Way Data Binding) في Angular
الجزء الخامس: الربط ثنائي الاتجاه للبيانات (Two-Way Data Binding) في Angular باستخدام ngModel

ما هو المكون (Component) في Angular؟

المكونات هي اللبنات الأساسية والأكثر جوهرية لأي تطبيق Angular. يمكننا تشبيه المكونات بقطع لعبة LEGO؛ حيث نقوم بإنشاء مكون واحد مرة واحدة، ولكن يمكننا استخدامه مرات عديدة حسب حاجتنا في أجزاء مختلفة من المشروع. هذا يعزز مبدأ إعادة الاستخدام ويقلل من تكرار الكود.

يتكون مكون Angular عادةً من ثلاثة أجزاء رئيسية متكاملة:

قالب HTML (HTML Template): يمثل الواجهة المرئية للمكون (View).
ملف TypeScript (TypeScript File): يحتوي على منطق العمل والبيانات الخاصة بالمكون (Model).
ملف CSS (CSS File): يتضمن الأنماط والتصميم الخاص بالمكون (Styling).

لماذا نحتاج إلى المكونات؟

يعد استخدام المكونات مفيدًا للغاية ويقدم العديد من المزايا لتطوير تطبيقات الويب:

تقسيم واجهة المستخدم: تعمل المكونات على تقسيم واجهة المستخدم إلى أجزاء أصغر وأكثر قابلية للإدارة، مما يسهل عرض البيانات والتحكم فيها.
فصل الاهتمامات (Separation of Concerns): يجب أن يركز المكون على عرض البيانات والتفاعل مع المستخدم فقط. لا ينبغي أن يشارك في مهام مثل إجراء طلبات HTTP، أو عمليات الخدمات (service operations)، أو التوجيه (routing)، وما إلى ذلك. هذا النهج يحافظ على الكود نظيفًا وواضحًا ويفصل الواجهة عن بقية أجزاء التطبيق.
إعادة الاستخدام: تقسم المكونات الكود إلى أجزاء أصغر قابلة لإعادة الاستخدام. لولا ذلك، لاضطررنا إلى تضمين عدد لا يحصى من أسطر الكود في ملف HTML واحد، مما يجعل صيانة الكود وتطويره أمرًا صعبًا للغاية.

إنشاء أول مكون Angular لنا

الآن، دعنا ننتقل إلى الجانب العملي وننشئ أول مكون لنا. الطريقة المختصرة والأكثر شيوعًا لإنشاء مكون هي باستخدام أداة سطر الأوامر Angular CLI:

ng g c component-name

يقوم هذا الأمر بإنشاء مكون جديد تمامًا بملفاته الخاصة (HTML، CSS، و TypeScript) ويسجله تلقائيًا في وحدة التطبيق الرئيسية (App Module).

ملاحظة حول وحدة التطبيق (App Module)

في Angular، نحتاج إلى تسجيل كل خدمة (service)، ومكون (component)، ووحدة (module) ضرورية في ملف الوحدة (module file) الخاص بها، عادةً ما يكون App Module هو الوحدة الرئيسية التي تجمع كل هذه العناصر معًا.

التعمق في ملف مكون TypeScript

الآن دعنا نلقي نظرة فاحصة على نموذج المكون (ملف TypeScript الخاص بالمكون):

هذا في الأساس هو عبارة عن فئة (TypeScript class)، ولكن لتعريفها كمكون في Angular، نحتاج إلى بعض الإضافات:

استيراد Component: أولاً وقبل كل شيء، نحتاج إلى استيراد Component من مكتبة @angular/core، حتى نتمكن من استخدام المزخرف (decorator) الخاص بالمكون.
المزخرف @Component: يقوم هذا المزخرف بتعليم الفئة (class) كمكون ويسمح لنا بإضافة البيانات الوصفية (metadata) التالية:

selector: يستخدم لاستدعاء المكون لاحقًا كعلامة HTML مخصصة، على سبيل المثال: <app-root> </app-root>.
templateUrl: يحدد المسار إلى ملف HTML الذي يمثل الواجهة المرئية (View) للمكون.
styleUrls: (يمكن أن يكون أكثر من واحد) يحدد مسارات ملفات CSS التي تحتوي على الأنماط الخاصة بالمكون.

تصدير الفئة (export class): أخيرًا، نقوم بتصدير الفئة (المكون) حتى نتمكن من استدعائها داخل app.module أو في أماكن أخرى داخل المشروع لاحقًا، مما يجعله متاحًا للاستخدام.

ما هو الربط النصي (String Interpolation)؟

أحد أكثر الأسئلة شيوعًا التي يطرحها الناس حول Angular هو ماهية بناء الجملة الذي يستخدم الأقواس المتعرجة المزدوجة ({{ }}). المكونات تقوم بعرض البيانات، ولكن هذه البيانات يمكن أن تتغير بمرور الوقت، لذا يجب أن تكون ديناميكية.

نحن نستخدم الأقواس المتعرجة المزدوجة داخل قالب HTML لعرض البيانات الديناميكية من ملف TypeScript الخاص بالمكون، مثل: {{ data }}. هذا التمثيل يسمى الربط النصي (string interpolation)، وهو يسمح لك بدمج قيم المتغيرات أو تعابير TypeScript مباشرة في قالب HTML الخاص بك.

الخلاصة

يعد فهم كيفية إنشاء المكونات واستخدامها بكفاءة أحد أكبر الخطوات في تعلم Angular. نأمل أن يكون هذا المقال قد قدم لك معلومات قيمة ومفيدة. في الجزء التالي من هذه السلسلة، سنتناول التوجيهات (Angular Directives) مثل ng-if، ng-for، ng-class، والمزيد. ترقبوا المزيد!

الخلاصة التقنية

يمثل النهج القائم على المكونات في Angular حجر الزاوية في بناء تطبيقات ويب قوية وقابلة للصيانة. من خلال تقسيم واجهة المستخدم إلى وحدات مستقلة (المكونات)، يضمن Angular فصلًا واضحًا للاهتمامات (separation of concerns)، مما يعزز قابلية الكود لإعادة الاستخدام ويسهل عملية التطوير والتحقق. يعتبر String Interpolation أداة أساسية ضمن هذا الإطار، حيث يوفر طريقة بديهية وفعالة لربط البيانات الديناميكية من منطق التطبيق (TypeScript) مباشرة إلى الواجهة المرئية (HTML)، مما يتيح إنشاء واجهات مستخدم تفاعلية وسريعة الاستجابة دون تعقيدات مفرطة. هذا التكامل بين المكونات والربط النصي هو ما يجعل Angular خيارًا ممتازًا لتطوير تطبيقات الويب الحديثة والمعقدة.