@Directive مقابل @Component في Angular: ما الفرق وماذا يختار المبتدئ في 2024؟

لماذا هذا السؤال يفجر Stack Overflow (وعقلك)؟

أنت تكتب أول مشروع Angular لك. تنشئ مكونًا، وتضع عليه المزين @Component — كل شيء يعمل. ثم ترى في كود شخص آخر @Directive وتفكر: «ولماذا؟ أليس هذا نفس الشيء؟». تنبيه: لا، ليس نفس الشيء. لكن الارتباك يحدث لدى 90% من المبتدئين.

سؤال «@Directive vs @Component in Angular» حصل على آلاف المشاهدات على Stack Overflow ليس من فراغ. دعنا مرة واحدة وإلى الأبد نفهم الفرق، ومتى نستخدم ماذا، وكيف لا نخجل في المقابلة. هيا بنا!

ما هو @Component؟ (تنبيه: هو أيضًا @Directive)

بدايةً — كشف الأقنعة. @Component هو نوع فرعي من @Directive. نعم، لم تسمع خطأ. أي مكون في Angular هو توجيه. لكن مع اختلاف مهم: المكون لديه قالب (template).

المزين @Component يرث كل شيء من @Directive ويضيف «ميزته» الخاصة — إمكانية عرض HTML. إذا كان التوجيه هو «سلوك»، فإن المكون هو «سلوك + قطعة من الواجهة».

مثال لمكون بسيط بلغة TypeScript

import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-hello',\n  template: `<h1>مرحبًا، {{name}}!</h1>`,\n  styles: ['h1 { color: blue; }']\n})\nexport class HelloComponent {\n  name: string = 'العالم';\n}\n

هنا HelloComponent هو مكون كامل. لديه قالب خاص به، وأنماط، ومنطق. يمكن استخدامه في قالب آخر كـ <app-hello></app-hello>.

ما هو @Directive؟ (سلوك خالص)

التوجيه هو كلاس مع مزين @Directive، والذي يغير سلوك أو مظهر عنصر DOM موجود. التوجيه ليس له قالب خاص به. لا ينشئ عنصرًا جديدًا — بل «يتعلق» بعنصر موجود بالفعل.

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

\n
• المكونات (نعم، هي أيضًا توجيهات) — مع قالب.
\n
• التوجيهات الهيكلية — تغير هيكل DOM (*ngIf, *ngFor).
\n
• توجيهات السمات — تغير مظهر أو سلوك العنصر (ngClass, ngStyle).
\n

مثال لتوجيه سمة بلغة TypeScript

import { Directive, ElementRef, HostListener } from '@angular/core';\n\n@Directive({\n  selector: '[appHighlight]'\n})\nexport class HighlightDirective {\n  constructor(private el: ElementRef) {}\n\n  @HostListener('mouseenter') onMouseEnter() {\n    this.el.nativeElement.style.backgroundColor = 'yellow';\n  }\n\n  @HostListener('mouseleave') onMouseLeave() {\n    this.el.nativeElement.style.backgroundColor = null;\n  }\n}\n

هذا التوجيه يبرز العنصر باللون الأصفر عند تمرير الماوس. لا ينشئ عقدة DOM جديدة — بل «يعدل» العقدة الموجودة. يُستخدم هكذا: <div appHighlight>مرر الماوس فوقي</div>.

الاختلافات الرئيسية بين @Directive و @Component

دعنا نرتب الأمور. إليك جدول سيساعدك على تذكر الفرق مرة واحدة وإلى الأبد:

الخاصية	@Component	@Directive
وجود قالب (template)	✅ نعم، إلزامي	❌ لا
ينشئ عنصر DOM جديد	✅ نعم (عبر المحدد)	❌ لا (يُطبق على عنصر موجود)
وجود أنماط (styles)	✅ نعم، يمكن عزلها	❌ المدونات مستودع أحادي مع C++: تنظيم الكود وأفضل الممارسات العمل مع نظام الملفات في TypeScript: دليل شامل gRPC في JavaScript: متى تستخدمه وكيف سيسرع مشروعك توصيات الكتب TypeScript وDocker: حاويات التطبيقات Go (Golang) وقواعد البيانات: دليل عملي إنشاء إضافات للمتصفحات Rust Cookbook: وصفات للبرمجة الفعالة اقرأ أيضًا القيم الافتراضية لكائن TypeScript في الوسائط: دليل شامل التعبيرات المنتظمة في PHP: دليل شامل مع أمثلة أهم أخطاء مطوري Swift المبتدئين: المستوى المتقدم أفضل 10 أطر عمل Kotlin لتطوير الويب في 2024 سحر Go: string → []byte — 3 طرق لتحويل سلسلة نصية إلى مصفوفة بايت 🍪 Сначала примите условия Чтобы войти на сайт, необходимо принять соглашение об использовании файлов cookie. Мы используем их для авторизации и улучшения работы сайта. Политика конфиденциальности Принять и продолжить Закрыть 🍪 Мы используем файлы cookie для авторизации, аналитики и улучшения работы сайта. Продолжая пользоваться сайтом, вы соглашаетесь с нашей политикой конфиденциальности. Принять Только необходимые