ما الفرق بين @Directive و @Component في Angular؟

```html مرحبًا بالجميع! لقد بدأت للتو في تعلم Angular و TypeScript، وواجهت بعض الالتباس حول المُزيِّنات @Directive و @Component. أفهم أن كلاهما يُستخدم لإنشاء "كيانات" في Angular، لكنني لا أفهم تمامًا متى أستخدم أيهما. على سبيل المثال، قمت بإنشاء مكون بسيط لعرض زر: ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-my-button', template: `{{ label }}` }) export class MyButtonComponent { label = 'Нажми меня'; } ``` ثم حاولت فعل الشيء نفسه باستخدام توجيه: ```typescript import { Directive } from '@angular/core'; @Directive({ selector: '[appMyButton]' }) export class MyButtonDirective { // كيف يمكنني إضافة قالب وأنماط هنا؟ } ``` لقد قرأت أن `@Component` هو فئة فرعية من `@Directive`، لكنهما يتصرفان بشكل مختلف عمليًا. في `@Directive`، لا يمكن استخدام `template` و `styles`، بينما في `@Component` يمكن. إذن، لماذا نحتاج إلى `@Directive`؟ ```