| وجه المقارنة المعمارية | الأنابيب المدمجة (Built-in Pipes) | الأنابيب المخصصة (Custom Pipes) |
|---|---|---|
| مجال الاستخدام الوظيفي | العمليات العامة المشتركة مثل تنسيق التواريخ والتواريخ والعملات | المتطلبات الخاصة والفريدة لبيئة العمل ومنطق التطبيق المعماري |
| التحكم البرمجي في المنطق | ثابت ومحدد بالخصائص التي وفرها فريق تطوير أنجولر | مخصص بالكامل ومبرمج يدوياً لتلبية خوارزميات تحويل البيانات الخاصة بالمشروع |
| إمكانية إعادة الاستخدام | متاحة عالمياً في أي تطبيق أنجولر يعتمد على `CommonModule` | متاحة وقابلة للاستيراد والاستخدام الفوري داخل أي مكون مستقل (`Standalone Component`) |
في مسار بناء التطبيقات الهندسية الضخمة باستخدام Angular 22.1، قد لا تلبي الأنابيب المدمجة الجاهزة كافة المتطلبات الفريدة للأعمال. هنا تبرز الحاجة المعمارية لبناء أنابيب مخصصة (Custom Pipes) تخدم أهدافاً برمجية محددة بدقة. من خلال تنفيذ الواجهة البرمجية الصارمة PipeTransform واستخدام نظام الأكواد الموحد، يمكنك صياغة محولات بيانات فريدة ومستقلة تماماً، يمكن إعادة استخدامها بكفاءة في أي جزء من المشروع.
يتطلب بناء أي أنبوب مخصص في أنجولر إنشاء صنف (Class) يحمل الزخرفة @Pipe مع تحديد اسم مميز له، وتطبيق الواجهة البرمجية PipeTransform التي تفرض وجود الدالة الإجبارية transform(). هذه الدالة تستقبل القيمة الأساسية وأي معاملات إضافية، وتُعيد القيمة النهائية بعد معالجتها.
في أحدث إصدارات أنجولر، تُبنى الأنابيب كمكونات مستقلة تماماً، مما يتيح لك استيرادها مباشرة داخل مصفوفة imports الخاصة بأي مكون يحتاج إلى استخدامها، دون الحاجة لتسجيلها في وحدات قديمة (NgModules).
| 1 | import { Pipe, PipeTransform } from '@angular/core'; |
| 2 | |
| 3 | @Pipe({ |
| 4 | name: 'customEllipsis', |
| 5 | standalone: true |
| 6 | }) |
| 7 | export class CustomEllipsisPipe implements PipeTransform { |
| 8 | transform(value: string, limit: number = 25): string { |
| 9 | if (!value) return ''; |
| 10 | if (value.length <= limit) { |
| 11 | return value; |
| 12 | } |
| 13 | return value.substring(0, limit) + ' ... (مختصر هندسياً)'; |
| 14 | } |
| 15 | } |
| 1 | import { Pipe, PipeTransform } from '@angular/core'; |
| 2 | |
| 3 | @Pipe({ |
| 4 | name: 'slugify', |
| 5 | standalone: true |
| 6 | }) |
| 7 | export class SlugifyPipe implements PipeTransform { |
| 8 | transform(value: string): string { |
| 9 | if (!value) return ''; |
| 10 | return value |
| 11 | .toLowerCase() |
| 12 | .trim() |
| 13 | .replace(/[^\w\s-]/g, '') |
| 14 | .replace(/[\s_-]+/g, '-') |
| 15 | .replace(/^-+|-+$/g, ''); |
| 16 | } |
| 17 | } |
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | import { CustomEllipsisPipe } from './custom-ellipsis.pipe'; |
| 4 | import { SlugifyPipe } from './slugify.pipe'; |
| 5 | |
| 6 | @Component({ |
| 7 | selector: 'app-custom-pipes-demo', |
| 8 | standalone: true, |
| 9 | imports: [CommonModule, CustomEllipsisPipe, SlugifyPipe], |
| 10 | template: ` |
| 11 | <div class="master-container"> |
| 12 | <h3>بناء واستخدام الأنابيب المخصصة في Angular 22.1</h3> |
| 13 | |
| 14 | <div class="data-card"> |
| 15 | <p><strong>النص الأصلي الطويل:</strong> {{ rawArticleTitle }}</p> |
| 16 | <p><strong>بعد تطبيق أنبوب الاختصار المخصص:</strong> {{ rawArticleTitle | customEllipsis: 30 }}</p> |
| 17 | <p><strong>بعد تطبيق أنبوب الـ Slugify المخصص:</strong> {{ rawArticleTitle | slugify }}</p> |
| 18 | </div> |
| 19 | </div> |
| 20 | `, |
| 21 | styles: [` |
| 22 | .master-container { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; } |
| 23 | .data-card { background: #1e293b; color: #38bdf8; padding: 16px; border-radius: 8px; margin: 12px 0; border: 1px solid #334155; font-weight: bold; } |
| 24 | .data-card p { margin: 8px 0; color: #e2e8f0; } |
| 25 | `] |
| 26 | }) |
| 27 | export class CustomPipesDemoComponent { |
| 28 | rawArticleTitle = 'Advanced Architectural Patterns & Custom Pipes in Angular 22.1!'; |
| 29 | } |