كيفية إنشاء أنابيب مخصصة في الزاوي

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

تقدم Angular مجموعة متنوعة من الأنابيب المضمنة مثل DatePipe وCurencyPipe وUpperCasePipe. إلى جانب الأنابيب المضمنة التي تقدمها Angular، يمكنك إنشاء أنابيب مخصصة لتحويل البيانات بأي طريقة تريدها.

قم بإعداد مشروعك الزاوي

قبل إنشاء أنابيب مخصصة، تأكد من أنك فهم الأنابيب في الزاوي. لتتمكن من إعداد مشروع Angular، تأكد من تثبيت Angular CLI على جهازك. يمكنك تثبيته مع npm (مدير حزمة العقدة).

قم بتثبيت Angular CLI عن طريق تشغيل الأمر التالي:

npm install -g @angular/cli

بعد ذلك، قم بإنشاء مشروع Angular جديد عن طريق تشغيل هذا الأمر:

ng new my-app

بمجرد إنشاء المشروع، انتقل إلى دليل المشروع الخاص بك وافتح التطبيق الخاص بك على IDE الخاص بك.

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

الآن بعد أن قمت بإعداد تطبيق Angular الخاص بك، فإن الشيء التالي الذي يجب عليك فعله هو إنشاء أنبوب مخصص. لإنشاء أنبوب مخصص، يجب عليك إنشاء أنبوب جديد باستخدام Angular CLI.

للقيام بذلك، قم بتشغيل الأمر التالي في دليل تطبيقك على الجهاز:

ng generate pipe customPipe

سيقوم هذا الأمر بإنشاء ملفين بالاسم custom-pipe.pipe.ts و custom-pipe.pipe.spec.ts في ال src/app الدليل. الملف custom-pipe.pipe.ts هو ملف تايب سكريبت الذي يحتوي على رمز تحديد الأنبوب المخصص الخاص بك. ستستخدم custom-pipe.pipe.spec.ts لإجراء الاختبارات على الأنبوب المخصص.

في ال custom-pipe.pipe.ts الملف، ستجد هذه الأسطر من التعليمات البرمجية:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: unknown, ...args: unknown[]): unknown {
returnnull;
 }
}

تستورد كتلة التعليمات البرمجية هذه ملف يضخ مصمم ديكور و تحويل الأنابيب واجهة من @ الزاوي/الأساسية وحدة. يحدد مصمم الأنابيب البيانات التعريفية للأنبوب، وتقوم فئة الأنبوب بتنفيذ واجهة PipeTransform.

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

ال تحول الطريقة تأخذ معلمتين، قيمة و الحجج. تمثل المعلمة value قيمة تحويل الأنبوب، وتمثل المعلمة args المعلمات الاختيارية التي قد ترغب في إضافتها.

الآن لقد فهمت النموذج المعياري لل custom-pipe.pipe.ts في الملف، استبدل كتلة التعليمات البرمجية أعلاه بهذا الرمز:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: string): string[] {
return value.split('');
 }
}

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

دمج الأنابيب المخصصة في التطبيق الخاص بك

لقد نجحت في إنشاء الأنبوب المخصص الخاص بك ويمكنك الآن استخدامه في قوالب Angular الخاصة بك. قبل استخدام الأنبوب المخصص في تطبيقك، قم باستيراده والإعلان عنه في ملفك app.module.ts ملف. للقيام بذلك، استبدل الكود الموجود في app.module.ts بما يلي:

import { NgModule } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { AppRoutingModule } from'./app-routing.module';
import { AppComponent } from'./app.component';
import { CustomPipePipe } from'./custom-pipe.pipe';
@NgModule({
 declarations: [
 AppComponent,
 CustomPipePipe
 ],
 imports: [
 BrowserModule,
 AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
exportclass AppModule { }

الآن يمكنك استخدام الأنبوب في القوالب الخاصة بك. افتح ال app.component.html الملف وأضف الكود التالي:

<p>{{ 'apple' | CustomPipe }}p>

في هذا المثال، يمكنك استخدام CustomPipe الأنابيب لتحويل السلسلة 'تفاحة' في مصفوفة سلسلة.

اختبر الأنابيب المخصصة لديك

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

ng serve

افتح المتصفح الخاص بك وانتقل إلى http://localhost: 4200. يجب أن تشاهد السلسلة المحولة المعروضة على الصفحة:

انتقل بتطبيقاتك Angular إلى المستوى التالي

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

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