PIPE IN ANGULAR 2
PIPE IN ANGULAR 2
جدول المصطلحات التقنية
مقدمة: ما هي الـ Pipes في Angular؟
في إطار عمل Angular، الـ Pipe (الأنبوب) هو أداة تُستخدم لتحويل بيانات العرض في القوالب (Templates). تمر البيانات عبر الـ Pipe ليتم تنسيقها أو ترشيحها أو تحويلها إلى شكل آخر يناسب واجهة المستخدم، مع الحفاظ على القيمة الأصلية للبيانات دون تغيير.
التشبيه البسيط: تخيل أن الـ Pipe هو "فلتر" تمر عبره البيانات - يدخل الماء العكر ويخرج نقيًا، لكن الماء نفسه لم يتغير في المصدر.
الـ Pipes المدمجة (Built-in Pipes) في Angular
استخدام الأنابيب المدمجة
توفر Angular مجموعة من الـ Pipes الجاهزة للاستخدام مباشرة. إليك أهمها:
أ) uppercase - تحويل النص إلى أحرف كبيرة
html
<div>
<p>{{ 'Angular' | uppercase }}</p>
<!-- الناتج: ANGULAR -->
</div>
البيانات الأصلية تبقى 'Angular' دون تغيير، فقط طريقة العرض تغيرت.
ب) number - تنسيق الأرقام
html
<div>
<p>{{ 3.14159265 | number: '1.4-4' }}</p>
<!-- الناتج: 3.1416 -->
</div>
شرح المعاملات:
'1.4-4': يعني:
1: الحد الأدنى لعدد الأرقام قبل الفاصلة العشرية
.4-4: من 4 إلى 4 أرقام بعد الفاصلة (يتم التقريب)
ج) date - تنسيق التواريخ
html
<div>
<p>{{ today | date: 'shortTime' }}</p>
<!-- الناتج: 02:05 PM -->
</div>
ميزات متقدمة في استخدام الـ Pipes
تمرير معاملات متعددة (Parameters)
يمكن تمرير عدة معاملات للـ Pipe لفتر بفاصلة:
html
{{ value | pipe: param1: param2: param3}}
ربط عدة أنابيب (Chaining Pipes)
يمكن ربط أكثر من pipe لنفس القيمة لتنفيذ عمليات متعددة:
html
<div>
<p>{{ today | date: 'fullDate' | uppercase }}</p>
<!-- الناتج: SATURDAY, APRIL 9, 2022 -->
</div>
يتم تنفيذ العمليات من اليسار لليمين: أولاً date ثم uppercase.
إنشاء Custom Pipe مخصص
عندما لا توجد pipe تناسب احتياجاتك، يمكنك إنشاء pipe مخصص.
خطوات إنشاء Search Filter Pipe
سننشئ pipe للبحث والتصفية في مصفوفة من البيانات.
الخطوة 1: إنشاء ملف الـ Pipe
typescript
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'searchFilter' // اسم الـ Pipe الذي سنستخدمه في القالب
})
export class SearchFilterPipe implements PipeTransform {
transform(value: any[], searchText: string, propName: string): any[] {
// التحقق من وجود البيانات
if (!value) {
return [];
}
// إذا لم يكن هناك نص بحث أو خاصية محددة
if (!searchText || !propName) {
return value;
}
// تحويل نص البحث إلى أحرف صغيرة للمقارنة
searchText = searchText.toLowerCase();
// تصفية البيانات
return value.filter(item => {
// التحقق من وجود الخاصية المطلوبة في العنصر
if (item[propName]) {
// البحث في الخاصية المحددة
return item[propName].toLowerCase().includes(searchText);
}
return false;
});
}
}
الخطوة 2: تسجيل الـ Pipe في الموديول
typescript
import { SearchFilterPipe } from './search-filter.pipe';
@NgModule({
declarations: [
// ... المكونات الأخرى
SearchFilterPipe // إضافة الـ Pipe هنا
],
// ... باقي الإعدادات
})
export class AppModule { }
الخطوة 3: استخدام الـ Pipe في القالب
ملف TypeScript (chat.component.ts):
typescript
export class ChatComponent {
public query: string = ''; // نص البحث
// بيانات المحادثات
chats = {
group: [
{ id: 1, name: 'مشروع Angular', members: 5 },
{ id: 2, name: 'دعم تقني', members: 3 },
{ id: 3, name: 'اجتماع الفريق', members: 8 }
]
};
}
ملف القالب (chat.component.html):
html
<!-- حقل البحث -->
<input
class="search-chat"
placeholder="بحث في المحادثات..."
[(ngModel)]="query"
type="text"
/>
<!-- عرض المحادثات المصفاة -->
<div *ngFor="let item of chats.group | searchFilter: query:'name'; let i = index">
<div class="chat-item" (click)="openChat(item)">
<h4>{{ item.name }}</h4>
<p>عدد الأعضاء: {{ item.members }}</p>
</div>
</div>
كيف يعمل الـ Pipe المخصص؟
الإدخال: المصفوفة الأصلية chats.group
المعاملات:
query: نص البحث الذي يدخله المستخدم
'name': اسم الخاصية التي نريد البحث فيها
المعالجة: تصفية العناصر التي تحتوي على نص البحث في خاصية name
الإخراج: مصفوفة جديدة تحتوي على العناصر المطابقة فقط
أفضل الممارسات مع الـ Pipes
Pure vs Impure Pipes
Pure Pipes (النقية): تعاد حساباتها فقط عند تغير القيمة المرجعية (reference change)
Impure Pipes (غير النقية): تعاد حساباتها في كل دورة تغيير (change detection cycle)
نصائح أدائية
استخدم Pure pipes قدر الإمكان
تجنب عمليات معقدة داخل الـ transform
فكر في استخدام methods في الكومبوننت للعمليات المعقدة
أمثلة إضافية لـ Pipes مفيدة
Pipe لتحويل العملة
typescript
@Pipe({ name: 'customCurrency' })
export class CustomCurrencyPipe implements PipeTransform {
transform(value: number, currencyCode: string = 'USD'): string {
return new Intl.NumberFormat('ar-SA', {
style: 'currency',
currency: currencyCode
}).format(value);
}
}
Pipe لتقصير النصوص الطويلة
typescript
@Pipe({ name: 'truncate' })
export class TruncatePipe implements PipeTransform {
transform(value: string, limit: number = 50, ellipsis: string = '...'): string {
if (value.length <= limit) return value;
return value.substring(0, limit) + ellipsis;
}
}
الخاتمة
الـ Pipes في Angular هي أداة قوية تتيح:
فصل منطق تحويل البيانات عن مكونات العرض
إعادة استخدام كود التحويل في عدة أماكن
تحسين قابلية قراءة القوالب
تطبيق تنسيقات قياسية عبر التطبيق كله
ابدأ باستخدام الـ Pipes المدمجة، وعندما تحتاج وظيفة محددة، لا تتردد في إنشاء Custom Pipe يناسب احتياجات تطبيقك.
ليست هناك تعليقات: