الأنابيب في Angular هي وظائف بسيطة تستخدم لتحويل البيانات في القوالب دون تعديل البيانات الأساسية. تأخذ الأنابيب قيمة وتعالجها وترجع مخرجات منسقة أو محولة. غالبًا ما يتم استخدامها لتنسيق التواريخ والأرقام والسلاسل وحتى المصفوفات أو الكائنات.

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

يساعد استخدام الأنابيب في الحفاظ على الكود نظيفًا وقابلاً للقراءة. بدلاً من كتابة منطق معقد في القوالب أو المكونات، يمكنك تغليف هذا المنطق في قناة، والتي يمكن بعد ذلك إعادة استخدامها عبر أجزاء مختلفة من التطبيق الخاص بك.
على سبيل المثال، إذا كنت تقوم بتطوير نظام أساسي للمدونة حيث يمكن للمستخدمين رؤية تاريخ نشر المقالات. يجب عرض التواريخ بتنسيق سهل الاستخدام، مثل "31 أغسطس 2024"، بدلاً من التنسيق الأولي "2024–08–31T14:48:00.000Z". باستخدام أنابيب، يمكنك استخدام DatePipe المدمج في Angular في القالب بدلاً من تنسيق التاريخ يدويًا في المكون، مما يؤدي إلى ازدحام التعليمات البرمجية وتقليل إمكانية القراءة.

Published on: {{ article.publishDate | date:'longDate' }}

لتطبيق توجيه، استخدم pipe عامل التشغيل (|) ضمن تعبير قالب كما هو موضح في مثال التعليمات البرمجية أعلاه.

أنابيب مدمجة

يأتي Angular مزودًا بالعديد من الأنابيب المضمنة التي تغطي المهام الشائعة (DatePipe وUpperCasePipe وLowerCasePipe وCurencyPipe وAsyncPipe وJsonPipe و وما إلى ذلك). معرفة كيفية استخدامها يمكن أن يجعل التعليمات البرمجية الخاصة بك أكثر وضوحًا وأكثر كفاءة.

أمثلة:

{{ user | json }}
Price: {{ product.price | currency:'USD' }}
{{ user.name | uppercase }}

السعر: {{ سعر المنتج | العملة: "USD" }}

{{ اسم المستخدم | حرف كبير }}

أنابيب ذات معلمات

العديد من الأنابيب الزاويّة تقبل المعلمات لتخصيص سلوكها.

المعلمة ، اتبع اسم الأنبوب بعلامة النقطتين (:) وقيمة المعلمة

الأنابيب تقبل معلمات متعددة، مفصولة بنقطتين إضافيتين.

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

سعر المنتج {{ السعر | العملة المخصصة:'USD' }}

The product price is {{ price | customCurrency:'USD' }}

تم النشر بتاريخ: {{article.publishDate | التاريخ:'MMMM d, y, h:mm:ss a' }}

Published on: {{ article.publishDate | date:'MMMM d, y, h:mm:ss a' }}

السعر: {{ سعر المنتج | العملة:'EUR':'symbol-narrow':'1.0-0' }}

Price: {{ product.price | currency:'EUR':'symbol-narrow':'1.0-0' }}

أنابيب تسلسل

يمكنك ربط عدة أنابيب معًا لتحقيق تحويلات معقدة.

{{ Article.content | الشريحة:0:100 | حرف كبير }}

{{ article.content | slice:0:100 | uppercase }}

وتحويلها إلى أحرف كبيرة. أنابيب مخصصة

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

مثال:

في المثال التالي، سنقوم بإنشاء أنبوب يضيف تحية إلى اسم مثل "مرحبًا، أليس!"

قم بتشغيل الأمر التالي لإنشاء أنبوب جديد:

ng إنشاء تحية الأنابيب

ng generate pipe greet

استيراد { Pipe, PipeTransform } من '@angular/core'; @ماسورة({ name: 'greet', // هذا هو الاسم الذي ستستخدمه في القالب مستقل: صحيح، }) فئة التصدير GreetPipe تنفذ PipeTransform { تحويل (القيمة: سلسلة): سلسلة { إرجاع `مرحبًا، ${value}!`; // هذا هو منطق التحويل } }

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // This is the name you'll use in the template
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string): string {
    return `Hello, ${value}!`;  // This is the transformation logic
  }
}

{{ "أليس" | تحية }}

{{ 'Alice' | greet }}

الآن سنقوم بجعل التحية قابلة للتخصيص، بحيث يمكنك أن تقول "مرحبًا، أليس!" أو "مرحبًا يا أليس!" اعتمادًا على ما تمرره إلى الأنبوب.

استيراد { Pipe, PipeTransform } من '@angular/core'; @ماسورة({ الاسم: 'ترحيب'، // نفس اسم الأنبوب كما كان من قبل مستقل: صحيح، }) فئة التصدير GreetPipe تنفذ PipeTransform { تحويل (القيمة: سلسلة، تحية: سلسلة = 'مرحبا'): سلسلة { إرجاع `${greeting}, ${value}!`; // الآن يستخدم التحية التي تم تمريرها } }

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // Same pipe name as before
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string, greeting: string = 'Hello'): string {
    return `${greeting}, ${value}!`;  // Now it uses the greeting passed in
  }
}

الآن يمكنك تخصيص الترحيب في القوالب الخاصة بك.

{{ "أليس" | تحية: "مرحبًا" }}

{{ "بوب" | تحية: "مرحبًا" }}

{{ 'Alice' | greet:'Hi' }}
{{ 'Bob' | greet:'Welcome' }}

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

ما لم يكن ذلك ضروريًا، حافظ على الأنابيب الخاصة بك

لتجنب عمليات إعادة العرض غير الضرورية وللحفاظ على الأداء. مثال:

@ماسورة({ الاسم: "للبيع"، مستقل: صحيح، خالص : صحيح }) فئة التصدير OnSalePipe تنفذ PipeTransform { تحويل (العناصر: العنصر []): العنصر [] { return items.filter((item) => item.isOnSale); } }

@Pipe({
  name: "onSale",
  standalone: true,
  pure: true,
})
export class OnSalePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

• {{ اسم السلعة }} - {{ سعر السلعة | سعر التنسيق }} لي>

• {{ item.name }} - {{ item.price | formatPrice }}

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

من ناحية أخرى، يتم استدعاء

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

@ماسورة({ الاسم: "onSaleImpure"، مستقل: صحيح، طاهرًا : كاذبًا، }) فئة التصدير OnSaleImpurePipe تنفذ PipeTransform { تحويل (العناصر: العنصر []): العنصر [] { return items.filter((item) => item.isOnSale); } }

@Pipe({
  name: "onSale",
  standalone: true,
  pure: true,
})
export class OnSalePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

• {{ اسم السلعة }} - {{ سعر السلعة | سعر التنسيق }} لي>

• {{ item.name }} - {{ item.price | formatPrice }}

أفضل الممارسات لاستخدام الأنابيب

حافظ على بساطة الأنابيب. تجنب الحسابات الثقيلة في الأنابيب
تسمية الأنابيب بشكل واضح ووصفي
حافظ على تركيز الأنابيب على مسؤولية واحدة
تجنب الأنابيب غير النقية عندما يكون ذلك ممكنًا
اختبار الأنابيب المخصصة بدقة
خاتمة

الأنابيب الزاويّة

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