: ما هي التوجيهات وأنواعها في Angular

التوجيهاتDirectivesالتوجيهات الهيكليةStructural Directivesتوجيهات السماتAngular 22.1

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

وجه المقارنة الهندسية	المكونات (Components)	توجيهات السمات (Attribute Directives)	التوجيهات الهيكلية (Structural Directives)
التعريف والهدف الأساسي	عنصر واجهة يمتلك قالب HTML خاص به ويدير قسماً مستقلاً من الشاشة	تعديل مظهر، لون، أو سلوك عنصر موجود مسبقاً دون مسح هيكله	إضافة، إزالة، أو إعادة ترتيب عناصر الـ DOM جذرياً
طبيعة كتابة الوسم واستخدامه	يُستدعى بوسم خاص مستقل (مثل app-user-card)	يُستدعى كسمة (Attribute) داخل عنصر HTML أو مكون	يُستدعى مسبوقاً بعلامة النجمة (مثل *ngIf أو @if الحديثة)
التأثير على شجرة عناصر DOM	يُنشئ عنصراً جديداً ومستقلاً بذاته داخل شجرة الـ DOM	يعدل خصائص العنصر الحالي فقط ولا يغير عدد العناصر	يتحكم بوجود أو عدم وجود العنصر نهائياً من الـ DOM

الشرح

يدور هذا الموضوع بالكامل حول التوجيهات لتعديل سلوك عناصر الصفحة. في هذا الدرس التأسيسي الأول، سنتعرف بعمق على ماهية التوجيهات (Directives) وكيف تصبح الأداة المسؤولة عن تشكيل الواجهات، والتحكم في ظهور العناصر وهيكلها وسلوكها البصري داخل التطبيق.

تفصيل فلسفة وعمل التوجيهات

التعريف البرمجي للتوجيه:

التوجيه ببساطة هو صنف TypeScript مزخرف بـ @Directive() يخبر أنجولر بتنفيذ سلوك معين عندما يتم تطبيق هذا التوجيه على عنصر HTML أو مكون أو قالب.

الفرق الجوهري بين المكونات والتوجيهات:

المكون هو في الأساس "توجيه مزود بقالب (Template)"، بينما التوجيه الصريح (Directive) يعمل كأداة إضافية لتعديل السلوك البصري أو الهيكلي للعنصر الذي يُوضع عليه دون أن يمتلك قوالب خاصة به.

أمثلة برمجية: هيكل توجيه بسيط وعملي

المثال الأول: صنف التوجيه الأساسي بصيغة Standalone

typescript

1	import { Directive, ElementRef, inject } from '@angular/core';
2
3	@Directive({
4	selector: '[appHighlightCard]',
5	standalone: true
6	})
7	export class HighlightCardDirective {
8	// حقن مرجع عنصر الـ DOM الذي وُضع عليه التوجيه
9	private el = inject(ElementRef);
10
11	constructor() {
12	// تعديل لون الخلفية كمثال أولي لتأثير التوجيه
13	this.el.nativeElement.style.backgroundColor = '#1e293b';
14	this.el.nativeElement.style.color = '#38bdf8';
15	this.el.nativeElement.style.padding = '12px';
16	this.el.nativeElement.style.borderRadius = '8px';
17	}
18	}

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

المثال الثاني: قالب المكون الأب الذي يطبق التوجيه المخصص

typescript

1	import { Component } from '@angular/core';
2	import { HighlightCardDirective } from './highlight-card.directive';
3
4	@Component({
5	selector: 'app-directive-demo',
6	standalone: true,
7	imports: [HighlightCardDirective],
8	template: `
9	<div class="demo-container">
10	<h3>استعراض التوجيهات في Angular 22.1</h3>
11
12	<!-- تطبيق التوجيه مباشرة كسمة على عنصر عادي -->
13	<div appHighlightCard>
14	هذا العنصر تم تعديل سلوكه ومظهره بالكامل عبر التوجيه البرمجي المخصص!
15	</div>
16	</div>
17	`,
18	styles: [`
19	.demo-container { background: #090d16; color: #fff; padding: 20px; border-radius: 10px; }
20	`]
21	})
22	export class DirectiveDemoComponent {}

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

—استخدم التوجيهات لفصل منطق السلوك عن قوالب المكونات!
—عندما تلاحظ أنك تكرر نفس كود تعديل الـ DOM أو التفاعل الحركي في أكثر من مكان، فإن تحويله إلى توجيه مستقل (Directive) يمنح كودك نظافة عالية ومعمارية قابلة لإعادة الاستخدام في Angular 22.1.

الدرس السابق

الاستعلام عن محتوى المكون

الدرس التالي

بناء وتطوير أول توجيه

وجه المقارنة الهندسية

المكونات (Components)

توجيهات السمات (Attribute Directives)

التوجيهات الهيكلية (Structural Directives)

التعريف والهدف الأساسي

عنصر واجهة يمتلك قالب HTML خاص به ويدير قسماً مستقلاً من الشاشة

تعديل مظهر، لون، أو سلوك عنصر موجود مسبقاً دون مسح هيكله

إضافة، إزالة، أو إعادة ترتيب عناصر الـ DOM جذرياً

طبيعة كتابة الوسم واستخدامه

يُستدعى بوسم خاص مستقل (مثل app-user-card)

يُستدعى كسمة (Attribute) داخل عنصر HTML أو مكون

يُستدعى مسبوقاً بعلامة النجمة (مثل *ngIf أو @if الحديثة)

التأثير على شجرة عناصر DOM

يُنشئ عنصراً جديداً ومستقلاً بذاته داخل شجرة الـ DOM

يعدل خصائص العنصر الحالي فقط ولا يغير عدد العناصر

يتحكم بوجود أو عدم وجود العنصر نهائياً من الـ DOM

تفصيل فلسفة وعمل التوجيهات

التعريف البرمجي للتوجيه:

الفرق الجوهري بين المكونات والتوجيهات:

أمثلة برمجية: هيكل توجيه بسيط وعملي

المثال الأول: صنف التوجيه الأساسي بصيغة Standalone

typescript

1	import { Directive, ElementRef, inject } from '@angular/core';
2
3	@Directive({
4	selector: '[appHighlightCard]',
5	standalone: true
6	})
7	export class HighlightCardDirective {
8	// حقن مرجع عنصر الـ DOM الذي وُضع عليه التوجيه
9	private el = inject(ElementRef);
10
11	constructor() {
12	// تعديل لون الخلفية كمثال أولي لتأثير التوجيه
13	this.el.nativeElement.style.backgroundColor = '#1e293b';
14	this.el.nativeElement.style.color = '#38bdf8';
15	this.el.nativeElement.style.padding = '12px';
16	this.el.nativeElement.style.borderRadius = '8px';
17	}
18	}

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

المثال الثاني: قالب المكون الأب الذي يطبق التوجيه المخصص

typescript

1	import { Component } from '@angular/core';
2	import { HighlightCardDirective } from './highlight-card.directive';
3
4	@Component({
5	selector: 'app-directive-demo',
6	standalone: true,
7	imports: [HighlightCardDirective],
8	template: `
9	<div class="demo-container">
10	<h3>استعراض التوجيهات في Angular 22.1</h3>
11
12	<!-- تطبيق التوجيه مباشرة كسمة على عنصر عادي -->
13	<div appHighlightCard>
14	هذا العنصر تم تعديل سلوكه ومظهره بالكامل عبر التوجيه البرمجي المخصص!
15	</div>
16	</div>
17	`,
18	styles: [`
19	.demo-container { background: #090d16; color: #fff; padding: 20px; border-radius: 10px; }
20	`]
21	})
22	export class DirectiveDemoComponent {}