Angular Academy · درس

تسلسل Pipes وتمرير المعاملات

ادمجوا Pipes ومرّروا المعاملات

تسلسل Pipes وتمرير المعاملات درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

تمرير الوسائط إلى Pipes

يمكن أن تقبل Pipes وسائط بعد النقطتين. والصيغة هي {{ value | pipeName:arg1:arg2 }}. ويُفصل كل وسيط باستخدام نقطتين خاصتين به.

وسيط واحد

تأخذ العديد من Pipes وسيطًا واحدًا. فعلى سبيل المثال، تأخذ Pipe المسماة date سلسلة تنسيق.

<p>{{ today | date:"fullDate" }}</p>
<!-- Saturday, May 30, 2026 -->

وسائط متعددة

تأخذ Pipe المسماة slice فهرس بداية وفهرس نهاية، ويُمرَّر كل منهما باستخدام نقطتين خاصتين به.

<p>{{ text | slice:0:10 }}</p>
<!-- first 10 characters -->

الوسائط الديناميكية

يمكن أن تكون الوسائط خصائص للمكوّن، وليس مجرد قيم ثابتة. يتيح لك ذلك تغيير سلوك Pipe بشكل تفاعلي.

<p>{{ price | currency:currencyCode }}</p>

// component
currencyCode = "GBP";
price = 99;

ما هي سلسلة Pipes؟

يمكنك ربط Pipes بحيث يصبح ناتج إحدى Pipes مدخلًا للتي تليها. وتُنفَّذ من اليسار إلى اليمين.

<p>{{ name | slice:0:5 | uppercase }}</p>
<!-- slices first, then uppercases -->

مثال على الربط

في هذا المثال، يُنسَّق التاريخ ثم يُحوَّل إلى أحرف كبيرة. تُنفَّذ Pipe المسماة date أولًا، ثم uppercase.

<p>{{ today | date:"fullDate" | uppercase }}</p>
<!-- SATURDAY, MAY 30, 2026 -->

الترتيب مهم

يغيّر ترتيب Pipes المترابطة النتيجة. يؤدي تطبيق uppercase قبل slice أو بعده إلى إنتاج النص نفسه هنا، لكن الترتيب قد يكون مهمًا جدًا مع Pipes التي تُجري تحويلات.

<!-- uppercase then slice -->
{{ "angular" | uppercase | slice:0:3 }}
<!-- ANG -->

<!-- slice then uppercase -->
{{ "angular" | slice:0:3 | uppercase }}
<!-- ANG -->

دمج الوسائط والربط

يمكنك المزج بين الوسائط والربط بحرية. وما تزال كل Pipe تتلقى ناتج Pipe السابقة باعتباره قيمتها.

<p>{{ amount | number:"1.2-2" | slice:0:6 }}</p>

الربط مع currency

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

<p>{{ price | currency:"USD" }}</p>
<!-- $1,234.56 -->

نصائح لتحسين سهولة القراءة

قد تؤثر سلاسل Pipes الطويلة سلبًا في سهولة القراءة. إذا أصبحت السلسلة معقدة، ففكّر في حساب القيمة داخل المكوّن أو في استخدام Pipe مخصّصة بدلًا من ذلك.

// instead of a long template chain,
// compute in the component:
get displayName(): string {
  return this.name.slice(0, 5).toUpperCase();
}

المسافات حول Pipes

المسافات حول | و: اختيارية، لكنها موصى بها لتحسين سهولة القراءة. وتتجاهل Angular المسافات الزائدة.

<p>{{ value | date : "short" }}</p>
<!-- equivalent to value|date:"short" -->

تحقق سريع

اختبر مدى فهمك لوسائط Pipes وربطها.

مراجعة

تعلّمت تمرير وسيط واحد أو عدة وسائط باستخدام النقطتين، واستخدام الوسائط الديناميكية من خصائص المكوّن، وربط Pipes بحيث ينتقل الناتج من اليسار إلى اليمين.

ستبني في الخطوة التالية Pipe مخصّصة بك.

الأسئلة الشائعة

هل درس «تسلسل Pipes وتمرير المعاملات» مجاني؟

نعم — نص درس «تسلسل Pipes وتمرير المعاملات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «تسلسل Pipes وتمرير المعاملات»؟

ادمجوا Pipes ومرّروا المعاملات تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «تسلسل Pipes وتمرير المعاملات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy