@Directive و @Component في Angular: ما الفرق ومتى نستخدم أيهما؟

مرحباً بالجميع! بدأت تعلم Angular و TypeScript، وعند إنشاء أول مكوناتي وتوجيهاتي، ارتبكت في الفرق بين المُزخرفين `@Component` و `@Directive`. في التوثيق مكتوب أن `@Component` هو فئة فرعية من `@Directive`، لكن عملياً يُستخدمان بشكل مختلف. على سبيل المثال، أقوم بإنشاء زر بسيط يغير لونه عند التمرير. يمكنني فعل ذلك سواء من خلال مكون أو من خلال توجيه. إليك الكود الخاص بي: **الخيار مع @Component:** ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-hover-button', template: `مرر`, styles: [` .highlight { background-color: yellow; } `] }) export class HoverButtonComponent { onHover() { /* إضافة كلاس */ } onLeave() { /* إزالة كلاس */ } } ``` **الخيار مع @Directive:** ```typescript import { Directive, HostListener, HostBinding } from '@angular/core'; @Directive({ selector: '[appHover