| نوع الاستخدام المعماري | الاعتماد على القيم الافتراضية للأنبوب | استخدام المعاملات المخصصة (Parameters) |
|---|---|---|
| التحكم بمظهر المخرجات | يستخدم الأنبوب الإعدادات الافتراضية العامة للنظام أو اللغة الحالية دون تدخل | يتيح للمطور تحديد قيم دقيقة مخصصة (مثل عدد الأرقام أو أنماط التواريخ) |
| المرونة في واجهات المستخدم | محدودة وتتطلب إنشاء أنابيب متعددة لكل حالة عرض مختلفة | عالية جداً حيث يمكن تمرير متغيرات ومعاملات متعددة لنفس الأنبوب حسب الحاجة |
| مستوى التخصيص الهندسي | بسيط وسريع للاستخدامات العامة المباشرة | متقدم ويلبي متطلبات واجهات المستخدم المعقدة بدقة متناهية |
في مسار بناء التطبيقات المعمارية المتقدمة باستخدام Angular 22.1، لا تقتصر الأنابيب على تقديم تحويلات ثابتة ونمطية، بل تتيح لك مرونة كاملة لتخصيص سلوكها عبر تمرير معاملات برمجية دقيقة (Pipe Parameters). من خلال استخدام النقطتين الرأسيتين (:), يمكنك توجيه الأنبوب لتعديل طريقة عرض البيانات (مثل تحديد عدد المنازل العشرية بدقة، تغيير نمط تاريخ العرض، أو التحكم في معايير الفلترة)، مما يمنح المطور تحكماً هندسياً كاملاً في واجهة المستخدم دون الحاجة لكتابة كود معقد داخل المكون.
يدعم هيكل الأنابيب في أنجولر تمرير عدة معاملات متتالية مفصولة بنقاط رأسية. على سبيل المثال، في أنبوب التنسيق العددي number: 'minInteger.minFraction-maxFraction', يتم توجيه الأنبوب لقواعد صارمة تحكم الحد الأدنى للأجزاء الصحيحة والكسور بدقة مطبعية كاملة.
يتيح تمرير المعاملات إمكانية الحفاظ على نظافة الأكواد، حيث تبقى قيمة البيانات الخام في صنف المكون (TypeScript) ثابتة ومرنة، بينما يتولى القالب (Template) معالجة وتطويع مظهرها بصرياً عبر تمرير المعاملات المناسبة للأنبوب.
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-pipe-params-demo', |
| 6 | standalone: true, |
| 7 | imports: [CommonModule], |
| 8 | template: ` |
| 9 | <div class="master-container"> |
| 10 | <h3>تمرير المعاملات وإعدادات الضبط للأنابيب في Angular 22.1</h3> |
| 11 | <p>التحكم الدقيق في مخرجات الأنابيب عبر المعاملات المخصصة:</p> |
| 12 | |
| 13 | <div class="data-card"> |
| 14 | <p><strong>الرقم الخام الأصلي:</strong> {{ piValue }}</p> |
| 15 | <p><strong>تنسيق افتراضي:</strong> {{ piValue | number }}</p> |
| 16 | <p><strong>تنسيق بمعاملات مخصصة (منزلتين عشريتين):</strong> {{ piValue | number: '1.2-2' }}</p> |
| 17 | <p><strong>تنسيق بمعاملات متقدمة (أربعة منازل عشرية):</strong> {{ piValue | number: '2.4-4' }}</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 PipeParamsDemoComponent { |
| 28 | piValue = 3.1415926535; |
| 29 | } |
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-date-params-demo', |
| 6 | standalone: true, |
| 7 | imports: [CommonModule], |
| 8 | template: ` |
| 9 | <div class="master-container"> |
| 10 | <h3>تخصيص معاملات التاريخ والوقت بدقة متناهية</h3> |
| 11 | <p>توجيه أنبوب التاريخ لعرض أنماط مخصصة باستخدام المعاملات النصية:</p> |
| 12 | |
| 13 | <div class="data-card"> |
| 14 | <p><strong>التاريخ الخام:</strong> {{ targetDate }}</p> |
| 15 | <p><strong>تنسيق اليوم والشهر والسنة (yyyy/MM/dd):</strong> {{ targetDate | date: 'yyyy/MM/dd' }}</p> |
| 16 | <p><strong>تنسيق الوقت الكامل مع التوقيت (HH:mm:ss Z):</strong> {{ targetDate | date: 'HH:mm:ss Z' }}</p> |
| 17 | </div> |
| 18 | </div> |
| 19 | `, |
| 20 | styles: [` |
| 21 | .master-container { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; margin-top: 16px; } |
| 22 | .data-card { background: #1e293b; color: #38bdf8; padding: 16px; border-radius: 8px; margin: 12px 0; border: 1px solid #334155; font-weight: bold; } |
| 23 | .data-card p { margin: 8px 0; color: #e2e8f0; } |
| 24 | `] |
| 25 | }) |
| 26 | export class DateParamsDemoComponent { |
| 27 | targetDate = new Date(); |
| 28 | } |
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-currency-params-demo', |
| 6 | standalone: true, |
| 7 | imports: [CommonModule], |
| 8 | template: ` |
| 9 | <div class="master-container"> |
| 10 | <h3>تخصيص معاملات العملات والرموز المالية</h3> |
| 11 | <p>التحكم بمعاملات عرض الرموز والمنازل العشرية للعملات:</p> |
| 12 | |
| 13 | <div class="data-card"> |
| 14 | <p><strong>القيمة المالية الخام:</strong> {{ accountBalance }}</p> |
| 15 | <p><strong>عرض العملة بالرمز الإنجليزي والكسور (GBP, symbol, '1.2-2'):</strong> {{ accountBalance | currency: 'GBP':'symbol':'1.2-2' }}</p> |
| 16 | <p><strong>عرض العملة بالكود المالي الصريح (CAD, code, '1.3-3'):</strong> {{ accountBalance | currency: 'CAD':'code':'1.3-3' }}</p> |
| 17 | </div> |
| 18 | </div> |
| 19 | `, |
| 20 | styles: [` |
| 21 | .master-container { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; margin-top: 16px; } |
| 22 | .data-card { background: #1e293b; color: #38bdf8; padding: 16px; border-radius: 8px; margin: 12px 0; border: 1px solid #334155; font-weight: bold; } |
| 23 | .data-card p { margin-8px 0; color: #e2e8f0; } |
| 24 | `] |
| 25 | }) |
| 26 | export class CurrencyParamsDemoComponent { |
| 27 | accountBalance = 78450.9284; |
| 28 | } |