تشريح الداخلي للمكونات

تشريح المكونAngular Component Anatomyبنية المكوناتAngular 22.1Component DecoratorTypeScript Class

جدول مرجعي سريع

جزء المكون الأساسي	الوظيفة والمسؤولية	الامتداد الافتراضي (للملفات الخارجية)
المنطق (Logic)	كلاس TypeScript يحتوي على البيانات (المتغيرات) والسلوك (الدوال) المسؤولة عن التفاعل مع المستخدم وجلب البيانات	.ts
القالب (Template)	ملف HTML يمثل الهيكل المرئي لواجهة المستخدم ويحتوي على أدوات Angular لعرض البيانات الديناميكية	.html
الأنماط (Styles)	قواعد التنسيق (CSS أو SCSS) التي تُطبق حصرياً على هذا المكون دون التأثير على باقي التطبيق (مبدأ العزل)	.scss أو .css

الشرح

استكمالاً لفهمنا للمكونات المستقلة بناءً على المخطط، ننتقل في هذا الدرس إلى الغوص داخل المكون نفسه لنفهم مما يتكون. أي مكون في Angular 22.1 يُبنى أساساً من ثلاثة أجزاء رئيسية تعمل معاً بانسجام لتكوين جزء من واجهة المستخدم: الهيكل (الـ HTML)، المظهر (الـ CSS/SCSS)، والمنطق البرمجي (الـ TypeScript). فهم كيفية ترابط هذه الأجزاء الثلاثة هو الخطوة الأولى لاحتراف بناء واجهات تفاعلية ومرنة.

تفصيل التشريح الداخلي

المزخرف (The @Component Decorator):

الكلاس المكتوب بلغة TypeScript هو مجرد كلاس عادي لا يمتلك أي قدرات خاصة بمفرده. لكي يدرك Angular أن هذا الكلاس يمثل "مكوناً"، نقوم بوضع المزخرف @Component فوقه مباشرة. هذا المزخرف هو بمثابة "الرابط السحري" الذي يخبر إطار العمل أين يجد ملف الـ HTML وملف الـ CSS التابعين لهذا الكلاس.

التكامل والتواصل بين الأجزاء:

العملية تبدأ بتعريف المتغيرات وتجهيز البيانات داخل كلاس الـ TypeScript. بعد ذلك، يقوم ملف الـ HTML (القالب) بقراءة هذه المتغيرات وعرضها للمستخدم. إذا تفاعل المستخدم مع الواجهة (مثلاً: قام بالضغط على زر)، يقوم القالب بإرسال هذا الحدث (Event) ليفعّل دالة معينة داخل الكلاس، وهكذا تكتمل دائرة التفاعل.

أمثلة برمجية: هيكلة المكونات (الداخلية والخارجية)

في Angular 22.1، يوفر لنا سطر الأوامر (CLI) مرونة في طريقة كتابة هذه الأجزاء الثلاثة إما في ملفات منفصلة أو دمجها في ملف واحد:

المثال الأول: المكون ذو الملفات المنفصلة (External Files)

هذا هو النمط الافتراضي والأكثر شيوعاً، حيث يُستخدم للمكونات الكبيرة لضمان نظافة الكود وفصل الاهتمامات.

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-user-card',
5	standalone: true,
6	// ربط المكون بملف القالب الخارجي
7	templateUrl: './user-card.component.html',
8	// ربط المكون بملف أو ملفات التنسيق الخارجية
9	styleUrl: './user-card.component.scss'
10	})
11	export class UserCardComponent {
12	userName: string = 'أحمد محمود';
13
14	changeName() {
15	this.userName = 'زائر جديد';
16	}
17	}

المثال الثاني: المكون المدمج (Inline Template & Styles)

يُستخدم للمكونات الصغيرة جداً (مثل الأزرار المخصصة أو التنبيهات البسيطة) حيث لا حاجة لإنشاء 3 ملفات لمجرد بضعة أسطر من الكود.

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-alert-badge',
5	standalone: true,
6	// كتابة الـ HTML مباشرة داخل ملف الـ TypeScript
7	template: `
8	<span class="badge" (click)="showAlert()">
9	{{ badgeText }}
10	</span>
11	`,
12	// كتابة التنسيق مباشرة داخل ملف الـ TypeScript
13	styles: [`
14	.badge {
15	background-color: #ff4757;
16	color: white;
17	padding: 5px 10px;
18	border-radius: 4px;
19	cursor: pointer;
20	}
21	`]
22	})
23	export class AlertBadgeComponent {
24	badgeText: string = 'تنبيه هام!';
25
26	showAlert() {
27	alert('تم النقر على التنبيه!');
28	}
29	}

نصائح احترافية

—متى تستخدم النمط المدمج (Inline)؟
—كقاعدة عامة في مشاريع Angular، إذا كان كود الـ HTML الخاص بك يتجاوز الـ 5 أسطر، أو كان التنسيق معقداً، فمن الأفضل دائماً فصلهما في ملفات خارجية (templateUrl و styleUrl). هذا سيجعل قراءة ملف الـ TypeScript أسهل بكثير ويسرّع من عملية تتبع الأخطاء البرمجية (Debugging).

الدرس السابق

ماهي المكونات المستقله

الدرس التالي

إنشاء وتكوين أول مكون مستقل خطوة بخطوة

جزء المكون الأساسي

الوظيفة والمسؤولية

الامتداد الافتراضي (للملفات الخارجية)

المنطق (Logic)

كلاس TypeScript يحتوي على البيانات (المتغيرات) والسلوك (الدوال) المسؤولة عن التفاعل مع المستخدم وجلب البيانات

.ts

القالب (Template)

ملف HTML يمثل الهيكل المرئي لواجهة المستخدم ويحتوي على أدوات Angular لعرض البيانات الديناميكية

.html

الأنماط (Styles)

قواعد التنسيق (CSS أو SCSS) التي تُطبق حصرياً على هذا المكون دون التأثير على باقي التطبيق (مبدأ العزل)

.scss أو .css

تفصيل التشريح الداخلي

المزخرف (The @Component Decorator):

التكامل والتواصل بين الأجزاء:

أمثلة برمجية: هيكلة المكونات (الداخلية والخارجية)

المثال الأول: المكون ذو الملفات المنفصلة (External Files)

هذا هو النمط الافتراضي والأكثر شيوعاً، حيث يُستخدم للمكونات الكبيرة لضمان نظافة الكود وفصل الاهتمامات.

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-user-card',
5	standalone: true,
6	// ربط المكون بملف القالب الخارجي
7	templateUrl: './user-card.component.html',
8	// ربط المكون بملف أو ملفات التنسيق الخارجية
9	styleUrl: './user-card.component.scss'
10	})
11	export class UserCardComponent {
12	userName: string = 'أحمد محمود';
13
14	changeName() {
15	this.userName = 'زائر جديد';
16	}
17	}

المثال الثاني: المكون المدمج (Inline Template & Styles)

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-alert-badge',
5	standalone: true,
6	// كتابة الـ HTML مباشرة داخل ملف الـ TypeScript
7	template: `
8	<span class="badge" (click)="showAlert()">
9	{{ badgeText }}
10	</span>
11	`,
12	// كتابة التنسيق مباشرة داخل ملف الـ TypeScript
13	styles: [`
14	.badge {
15	background-color: #ff4757;
16	color: white;
17	padding: 5px 10px;
18	border-radius: 4px;
19	cursor: pointer;
20	}
21	`]
22	})
23	export class AlertBadgeComponent {
24	badgeText: string = 'تنبيه هام!';
25
26	showAlert() {
27	alert('تم النقر على التنبيه!');
28	}
29	}