كيفية العمل مع ديكورات TypeScript في Angular

تعتبر ديكورات TypeScript نوعًا خاصًا من الإعلانات التي يمكن إرفاقها بفئة أو طريقة أو عنصر وصول أو خاصية أو معلمة. في Angular، توفر الديكورات طريقة لإضافة بيانات وصفية إلى الفئات، مما يجعلها قوية للغاية لإنشاء مكونات وخدمات قابلة لإعادة الاستخدام والمزيد. يشرح هذا الدليل كيفية العمل مع ديكورات TypeScript في Angular، مع توفير أمثلة للمساعدة في فهم استخدامها بشكل أفضل.

ما هي ديكورات TypeScript؟

الديكورات هي وظائف تعدل سلوك فئة أو عضو فئة. في Angular، تُستخدم الديكورات لتحديد المكونات والتوجيهات والأنابيب والخدمات القابلة للحقن. وهي توفر طريقة إعلانية لتطبيق البيانات الوصفية على فئة، والتي تستخدمها Angular لأغراض مختلفة، مثل إنشاء مثيلات للمكونات أو حقن التبعيات.

ديكورات الزوايا الشائعة

يحتوي Angular على العديد من أدوات التزيين المضمنة المستخدمة لأغراض مختلفة. فيما يلي أدوات التزيين الأكثر شيوعًا في Angular:

• @Component - يحدد مكون Angular.
• @Directive - يحدد توجيه Angular.
• @Pipe - يحدد أنبوبًا زاويًا.
• @Injectable - يحدد خدمة يمكن حقنها في مكونات أو خدمات أخرى.
• @Input - يزين خاصية لجعلها مدخلاً لربط البيانات.
• @Output - يزين خاصية لجعلها إخراجًا مرتبطًا بالحدث.

استخدام مُزيِّن @Component

يتم استخدام مُزيِّن @Component لتحديد مكون Angular. وهو يوفر بيانات وصفية حول المكون، مثل محدده، والقالب، والأنماط، والتكوينات الأخرى.

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello, World!</h1>`,
  styles: ['h1 { color: blue; }']
})
export class HelloWorldComponent { }

في هذا المثال، يحدد مُزيِّن @Component مكونًا بسيطًا باستخدام قالب يعرض "Hello, World!". يحدد مُحدد علامة HTML المخصصة التي سيتم استخدامها لهذا المكون.

استخدام @Injectable Decorator

يتم استخدام الديكور @Injectable لتحديد فئة خدمة يمكن حقنها في مكونات أو خدمات أخرى. وهو جزء أساسي من نظام حقن التبعيات في Angular.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Angular', 'TypeScript', 'Decorators'];
  }
}

هنا، يجعل الديكور @Injectable خدمة DataService متاحة لحقن التبعيات في جميع أنحاء التطبيق.

استخدام الديكورات @Input و@Output

تُستخدم الديكورات @Input و@Output لإنشاء خصائص الإدخال وأحداث الإخراج في مكونات Angular. تُستخدم عادةً في اتصالات المكونات.

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>{{ message }}</p>
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Input() message: string;
  @Output() messageEvent = new EventEmitter();

  sendMessage() {
    this.messageEvent.emit('Hello from Child Component!');
  }
}

في هذا المثال، يتم استخدام الديكور @Input لتمرير البيانات من مكون رئيسي إلى مكون فرعي. يتم استخدام الديكور @Output لإرسال البيانات من المكون الفرعي إلى المكون الرئيسي من خلال حدث.

إنشاء ديكورات مخصصة

يمكن إنشاء ديكورات مخصصة في Angular لإضافة سلوك أو بيانات وصفية محددة إلى الفئات أو الطرق أو الخصائص. فيما يلي مثال على ديكور فئة بسيط:

function LogClass(constructor: Function) {
  console.log('Class Decorator called:', constructor);
}

@LogClass
class MyService {
  constructor() {
    console.log('MyService created');
  }
}

هنا، تُعد وظيفة LogClass مُزيِّنًا مخصصًا يسجل الفئة في وحدة التحكم عند تعريفها. يؤدي تطبيق @LogClass على MyService إلى تسجيل الرسائل أثناء إنشائها.

خاتمة

توفر أدوات التزيين في Angular طريقة فعّالة لإضافة البيانات الوصفية والسلوك إلى الفئات والطرق والخصائص والمعلمات. إن فهم كيفية استخدام أدوات التزيين المضمنة مثل @Component و@Injectable و@Input و@Output أمر ضروري لتطوير Angular بشكل فعّال. بالإضافة إلى ذلك، يمكن إنشاء أدوات تزيين مخصصة لتلبية احتياجات محددة في التطبيق، مما يضيف المرونة إلى عملية التطوير.