يجب ألا نستخدم الأساليب في HTML إلا إذا كانت مرتبطة بالأحداث:

يواجه هذا مشكلة التنفيذ عدة مرات. في المثال، يتم تعيين مصفوفة، والتي سيتم تنفيذها 16 مرة. وبالمثل، لا ينبغي لنا استخدام طلبات get أو API مباشرة.

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

توضيح:

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

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

يمكننا إنشاء أنبوب إذا لم يكن موجودًا عن طريق تحديد موقعه المستهدف:

ng g p الأنابيب/الاسم الكامل (حيث الأنابيب/الاسم الكامل هو الموقع).

يتم إنشاء الأنبوب كفئة تنفذ PipeTransform، وهي واجهة تتطلب منا أن يكون لدينا طريقة تحويل. يتم تنفيذ هذه الطريقة عندما يعمل الأنبوب ويعمل تمامًا مثل الطريقة العادية. لاستخدام الأنبوب الذي تم إنشاؤه، يجب علينا استيراده إلى مكون التطبيق (مستقل):

عند استخدامه في HTML، نسميه بالاسم الموضح في حقل اسم الأنبوب، وذلك باستخدام الرمز '|' متبوعًا باسم الأنبوب. يتم تمرير الوسيطة الأولى إلى اليسار، وإذا أردنا تمرير الوسائط الأخرى، يتم تمريرها إلى اليمين، بعد النقطتين ':':

تذكر الممارسات الجيدة: إذا كان هناك العديد من الوسائط، فمن الأفضل استخدام كائن. كممارسة جيدة، حاول عدم الإفراط في استخدام الأنابيب لتجنب الفوضى. قم بتحليل الكود وسوف تنجح.

لإنشاء محتوى الأنبوب، نحدد الوسائط التي نريد تلقيها ونوع الإرجاع في طريقة التحويل. ثم نكتب المحتوى ونعيد النتيجة. يمكن استلام القيم الاختيارية عن طريق إضافة "؟"، ويمكن تعيين القيم الافتراضية باستخدام "=".

— ملاحظات مبنية على الدورة التدريبية Angular لـ EfisioDev —