پایپ‌های سفارشی
پایپ‌های سفارشی در انگولار ابزاری قدرتمند برای تبدیل و نمایش داده‌ها در قالب‌های HTML بدون تغییر وضعیت داخلی کامپوننت‌ها هستند. این پایپ‌ها به توسعه‌دهندگان امکان می‌دهند منطق تبدیل داده‌ها را از منطق نمایش جدا کنند و کد قابل نگهداری، قابل تست و قابل استفاده مجدد تولید کنند. با استفاده از پایپ‌های سفارشی می‌توان داده‌ها را فرمت‌بندی، فیلتر یا محاسبه کرد و این تغییرات را در سراسر برنامه به صورت یکنواخت اعمال نمود.
در توسعه مدرن وب و برنامه‌های SPA، پایپ‌های سفارشی باعث بهینه‌سازی عملکرد می‌شوند زیرا تنها زمانی که ورودی تغییر می‌کند، عملیات تبدیل داده اجرا می‌شود. این مکانیزم باعث جلوگیری از رندرهای غیرضروری و کاهش بار پردازشی می‌گردد. مفاهیم کلیدی انگولار مانند کامپوننت‌ها، مدیریت وضعیت، جریان داده و lifecycle hooks برای استفاده بهینه از پایپ‌ها حیاتی هستند.
در این آموزش، یاد خواهید گرفت که چگونه پایپ‌های ساده و پیشرفته ایجاد کنید، آنها را در قالب‌ها استفاده کنید و بهترین شیوه‌ها برای حفظ عملکرد و مقیاس‌پذیری را رعایت کنید. پس از اتمام این آموزش، قادر خواهید بود پایپ‌های سفارشی را به‌صورت موثر در پروژه‌های واقعی انگولار پیاده‌سازی کنید و تجربه کاربری و نگهداری کد را بهبود بخشید.
مثال پایه
typescriptimport { Pipe, PipeTransform } from '@angular/core';
import { Component } from '@angular/core';
@Pipe({
name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {
transform(value: string): string {
if (!value) return '';
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
@Component({
selector: 'app-root',
template: ` <h1>مثال پایپ سفارشی</h1> <p>متن اولیه: {{ text }}</p> <p>متن پس از تبدیل: {{ text | capitalize }}</p>
`
})
export class AppComponent {
text: string = 'خوش آمدید به انگولار';
}در این مثال، CapitalizePipe یک پایپ سفارشی است که اولین حرف یک رشته را بزرگ می‌کند. این پایپ با استفاده از PipeTransform ایجاد شده و در @Pipe دکوراتور ثبت شده است. متد transform ورودی را دریافت کرده، پردازش می‌کند و خروجی را بازمی‌گرداند بدون آنکه وضعیت کامپوننت را تغییر دهد. این باعث حفظ عدم تغییر (immutability) داده‌ها و جلوگیری از اثرات جانبی ناخواسته می‌شود.
AppComponent از پایپ در قالب خود با {{ text | capitalize }} استفاده می‌کند. این مثال نحوه اتصال پایپ به داده‌ها و تعامل با lifecycle hooks و داده‌های کامپوننت را نشان می‌دهد. از آنجا که این پایپ pure است، تنها زمانی که ورودی تغییر می‌کند، محاسبات انجام می‌شود و از این طریق عملکرد بهینه می‌گردد. چنین رویکردی امکان استفاده مجدد از پایپ‌ها در چندین کامپوننت را فراهم می‌کند و از کدنویسی تکراری جلوگیری می‌کند.
مثال کاربردی
typescriptimport { Pipe, PipeTransform } from '@angular/core';
import { Component, OnInit } from '@angular/core';
@Pipe({
name: 'filterByKeyword',
pure: true
})
export class FilterByKeywordPipe implements PipeTransform {
transform(items: string[], keyword: string): string[] {
if (!items || !keyword) return items;
return items.filter(item => item.toLowerCase().includes(keyword.toLowerCase()));
}
}
@Component({
selector: 'app-search-list',
template: ` <h2>لیست قابل جستجو</h2> <input [(ngModel)]="searchTerm" placeholder="یک کلیدواژه وارد کنید"> <ul> <li *ngFor="let item of items | filterByKeyword:searchTerm">{{ item }}</li> </ul>
`
})
export class SearchListComponent implements OnInit {
items: string[] = [];
searchTerm: string = '';
ngOnInit() {
this.items = ['Angular', 'React', 'Vue', 'Svelte', 'Ember'];
}
}این مثال عملی نشان می‌دهد چگونه یک پایپ سفارشی می‌تواند داده‌های پویا را پردازش کند. FilterByKeywordPipe یک آرایه از رشته‌ها را بر اساس ورودی کاربر فیلتر می‌کند. از آنجایی که پایپ pure است، فقط وقتی ورودی تغییر کند، محاسبه انجام می‌شود که باعث بهینه‌سازی عملکرد می‌گردد.
در SearchListComponent، داده‌ها در ngOnInit مقداردهی اولیه می‌شوند و پایپ در ngFor اعمال شده است. دوطرفه بودن [(ngModel)] باعث می‌شود ورودی کاربر به صورت زنده در قالب نمایش داده شود. این طراحی از prop drilling جلوگیری می‌کند و عدم تغییر وضعیت (immutability) داده‌ها را حفظ می‌کند. چنین پایپ‌هایی برای فیلتر کردن لیست‌ها، جداول داینامیک و داشبوردها ایده‌آل هستند و بهترین شیوه‌های معماری مبتنی بر کامپوننت، lifecycle hooks و بهینه‌سازی عملکرد را نشان می‌دهند.
بهترین شیوه‌ها در انگولار برای پایپ‌های سفارشی شامل استفاده از پایپ‌های pure، رعایت اصل مسئولیت واحد و جدا کردن منطق تبدیل داده از قالب است. باید از prop drilling و رندرهای غیرضروری جلوگیری کرد.
اشتباهات رایج شامل تغییر آرایه‌ها یا اشیاء در داخل پایپ، استفاده از پایپ impure بدون نیاز و قراردادن منطق پیچیده در قالب است. ابزار Angular DevTools برای دیباگ و بررسی change detection cycles مفید است. برای بهینه‌سازی عملکرد، استفاده از caching و trackBy در ngFor توصیه می‌شود. همچنین، اعتبارسنجی داده‌ها و ترکیب پایپ‌ها با سرویس‌ها می‌تواند امنیت و قابلیت تست‌پذیری را افزایش دهد.
📊 جدول مرجع
| انگولار Element/Concept | Description | Usage Example |
|---|---|---|
| CapitalizePipe | اولین حرف متن را بزرگ می‌کند | {{ 'سلام' |
| FilterByKeywordPipe | فیلتر کردن آرایه بر اساس کلیدواژه | *ngFor="let item of items |
| Pure Pipe | تنها زمانی محاسبه می‌کند که ورودی تغییر کند | @Pipe({ name: 'example', pure: true }) |
| Transform Function | پردازش و بازگشت داده‌ها در پایپ | transform(value: string): string { ... } |
| Pipe Decorator | تعریف پایپ در انگولار | @Pipe({ name: 'pipeName' }) |
مطالعه پایپ‌های سفارشی نشان می‌دهد که می‌توان منطق و نمایش را جدا نگه داشت، قابلیت نگهداری کد را افزایش داد و عملکرد را بهینه کرد. پایپ‌های pure محاسبات غیرضروری را جلوگیری می‌کنند و تعاملات smooth با lifecycle hooks و داده‌های بایند شده فراهم می‌آورند.
گام بعدی شامل یادگیری پایپ‌های چندپارامتری، impure pipes، ترکیب با سرویس‌ها و استراتژی‌های عملکرد در برنامه‌های بزرگ SPA است. پایپ‌ها باید برای فیلتر کردن لیست‌ها، فرمت‌بندی خروجی و تنظیم محتوای داینامیک استفاده شوند. مستندات رسمی انگولار، آموزش‌های جامعه و پروژه‌های نمونه منابع مناسبی برای یادگیری پیشرفته پایپ‌ها فراهم می‌کنند.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود