20. إنشاء أنابيب مخصصة

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

خطوات إنشاء أنبوب مخصص

1. التوليد: استخدم CLI: ng generate pipe status-label (أو ng g p status-label).
2. التنفيذ PipeTransform: يجب أن تنفذ فئة الأنبوب المُولَّدة واجهة PipeTransform وطريقة transform.
3. تحديد المنطق: نفذ منطق التحويل الخاص بك داخل طريقة transform.

مثال: أنبوب تسمية الحالة (Status Label Pipe)

يقوم هذا الأنبوب بتحويل رمز الحالة الرقمي إلى تسمية نصية مقروءة.

typescript import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'statusLabel' // الاسم المستخدم في القالب (صيغة الأنبوب) }) export class StatusLabelPipe implements PipeTransform {

transform(value: number, language: string = 'en'): string { switch (value) { case 1: return language === 'fr' ? 'Actif' : 'Active'; case 2: return language === 'fr' ? 'En attente' : 'Pending'; default: return 'Unknown Status'; } } }

الاستخدام في القالب

المكون: currentStatus: number = 2;

html

Status (EN): {{ currentStatus | statusLabel }}

Status (FR): {{ currentStatus | statusLabel:'fr' }}

ملاحظة حول النقاء (Purity): افتراضياً، الأنابيب هي أنابيب نقية (pure)، مما يعني أنها لا تعيد الحساب إلا إذا تغيرت قيمة الإدخال نفسها (تغيير بدائي) أو إذا تغير مرجع الكائن (تغيير الكائن). وهذا ذو كفاءة عالية في الأداء. إذا كنت تحتاج إلى إعادة الحساب في كل دورة اكتشاف تغيير، يمكنك تعيين pure: false في المُزخرف @Pipe، ولكن نادراً ما يوصى بذلك.