مثال خطوة بخطوة يوضح كيفية إنشاء ماسورة مخصصة في الزاوي 9

الأنابيب الزاوية ، طريقة لكتابة تحويلات قيمة العرض التي يمكن الإعلان عنها في HTML.

يوفر الإطار الزاوي مجموعة من الأنابيب المدمجة التي يمكن الاستفادة منها في تطبيقك. [link] التالي هو مرجع لوثائق API التي تسلط الضوء على الأنابيب المختلفة المتاحة.

نعلم جميعًا أنه لم يتم إنشاء جميع تطبيقات الويب بشكل متساوٍ وفي بعض الحالات تجد نفسك بحاجة إلى تحويل مخصص عند عرض المعلومات التي لا يتم توفيرها حاليًا من خلال الإطار الزاوي. ماذا عليك ان تفعل؟

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

في هذا البرنامج التعليمي ، سأوجهك عبر الخطوات التالية:

  • قم بإنشاء أنبوب مخصص
  • تسجيل الأنابيب المخصصة
  • استخدم الأنابيب التي تم إنشاؤها حديثًا

ولإثبات ذلك ، سننشئ أنبوبًا يحول / يحول الأميال إلى كيلومترات باستخدام التحويل الرياضي التالي:

يوجد 1.609344 كيلومترًا في ميل. لتحويل الأميال إلى كيلومترات ، اضرب قيمة الأميال في 1.609344.
صيغة التحويل: d (mi) = d (km) / 1.609344
مثال: المسافة (ميل) = 5 (كم) / 1.6093 = 3.11 ميل

1 - إنشاء أنبوب مخصص

الآن دعنا ننشئ ملفًا مطبعيًا يحتوي على رمز الأنبوب المخصص الخاص بنا. في مشروعك الزاوي ، اكتب الأمر التالي في VScode:> ng gp ./custom-pipes/kilometersToMiles

سينشئ هذا الأمر ملفين في بنية الملف التالية: app> custom-pipe.

  • كيلومتر إلى كيلومتر. pipe.spec.ts
  • كيلومتر إلى كيلومتر. pipe.ts

بالإضافة إلى ذلك ، سيقوم هذا الأمر بتسجيل / إضافة الأنبوب المخصص الذي تم إنشاؤه حديثًا إلى إعلاناتNgModule في ملف app.module.ts.

الآن بعد أن تم إنشاء ملف الأنبوب المخصص ، نحتاج إلى تنفيذ الكود لتنفيذ عملية التحويل. افتح ملف km-to-miles.pipe.ts وأضف الكود التالي:

convert (القيمة: number): number {const كيلومترز inMile = 1.609344 ؛ if (! isNaN (value)) {return value / kilmsInMile ؛ } إرجاع فارغة ؛ }}

يجب أن تبدو الكيلومترات إلى الأميال. pip.ts الآن كما يلي:

عند هذه النقطة قمنا بإنشاء الأنابيب المخصصة وهي جاهزة للاستخدام.

2 - كيفية استخدام / مرجع الأنبوب المخصص

في مشروعك ، افتح ملف html مكون حيث تريد استخدام هذا الأنبوب المخصص وأضف التعبير التالي:

{{5 | كيلومترات أميال}}

في هذا التعبير ، نقول الزاوي أننا نرغب في تطبيق الأنبوب على القيمة 5 بالكيلومترات لتحويله إلى أميال.

لرؤية التغيير ، في نوع طرف VScode الخاص بك في الأمر التالي لتجميع وتشغيل مشروعك:> ng serve -o

بمجرد تجميع الكود ، سيتم تشغيل مشروعك في متصفح وسترى ما يلي:

ما ستراه يحدث هو أن القيمة 5 التي قمت بتشفيرها في ملف html يتم تحويلها / تحويلها إلى أميال.

3 - كيفية استخدام الأنبوب المخصص داخل ملف Compon.ts

الآن بعد أن عرفنا كيفية استخدام الأنبوب الذي تم إنشاؤه حديثًا في ملف Compon.html ، ما هي خطوات استخدامه بشكل صحيح داخل ملف Compon.ts؟ هل هذا ممكن حتى؟

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

إليك كيفية تحقيق ذلك. افتح ملف Compon.ts حيث تريد استخدامه وفي الديكورComponent أضف الأنبوب المخصص إلى قائمة الموفرين.

بعد ذلك ، دعنا نضيف مُنشئًا لملف Compon.ts إذا لم يكن يحتوي بالفعل على واحد. داخل المنشئ ، دعنا نضيف الأنبوب المخصص كمعلمة:

عند هذه النقطة ، أخبرنا الزاوي أن مكوننا الخاص بنا سيكون له مثيل لأنبوب كيلومترات الأميال وقمنا بحقنه من خلال المنشئ.

من أجل استخدام الأنبوب في التعليمات البرمجية ، كل ما عليك فعله في هذه المرحلة هو إجراء استدعاء الوظيفة التالية:

this.convertToMiles.transform (x) ؛
ملاحظة: x هي المسافة بالكيلومتر التي تحاول تحويلها إلى أميال.

فيما يلي لقطة شاشة للرمز بأكمله داخل ملف Compon.ts الذي يوضح كيفية استدعاء الأنبوب المخصص الذي تم إنشاؤه حديثًا.

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

{{DistanceInMiles}}

قم بتجميع التعليمات البرمجية وتشغيلها وستلاحظ نجاح التحويل.

3 - الخلاصة

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

الآن بعد أن عرفت كيفية إنشاء أنبوب مخصص ، سيكون من المثير للاهتمام للغاية رؤية ما يمكنك إنشاؤه. آمل أن يكون هذا البرنامج التعليمي مفيدًا ومفيدًا.