دستورات سفارشی
در انگولار، دستورات سفارشی (Custom Directives) ابزار قدرتمندی برای کنترل رفتار، ظاهر و تعامل عناصر DOM هستند. آن‌ها به توسعه‌دهندگان اجازه می‌دهند تا منطق قابل استفاده مجددی بسازند که بدون نیاز به تغییر در کامپوننت‌ها، به عناصر HTML اعمال شود. دستورات سفارشی در واقع مکملی برای ساختار کامپوننت‌محور انگولار هستند و کمک می‌کنند کد تمیزتر، ماژولارتر و مقیاس‌پذیرتر شود.
استفاده از دستورات سفارشی زمانی اهمیت دارد که بخواهیم رفتاری خاص مانند تغییر رنگ، مدیریت رخدادها، یا اجرای منطق شرطی را به‌صورت مستقل از کامپوننت پیاده‌سازی کنیم. در معماری‌های SPA و پروژه‌های بزرگ، این الگو باعث بهبود state management، کاهش prop drilling و افزایش قابلیت نگهداری می‌شود.
در این آموزش پیشرفته، شما یاد خواهید گرفت که چگونه دستورات سفارشی در انگولار را ایجاد و در پروژه‌های واقعی پیاده‌سازی کنید. همچنین مفاهیم کلیدی مانند چرخه حیات (Lifecycle Hooks)، Data Flow بین دستورات و کامپوننت‌ها، و بهینه‌سازی عملکرد بررسی می‌شوند. این موضوع برای توسعه‌دهندگان حرفه‌ای انگولار که به دنبال ایجاد کامپوننت‌های قابل استفاده مجدد و ساخت برنامه‌های مدرن و تعاملی هستند، ضروری است.
مثال پایه
typescript// highlight.directive.ts
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
@Input('appHighlight') highlightColor: string = 'yellow';
constructor(private el: ElementRef) {}
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.highlightColor);
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight('');
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
// app.component.html
<p appHighlight="lightgreen">ماوس را روی این متن ببرید تا رنگ پس‌زمینه تغییر کند.</p>در این مثال، ما یک دستور سفارشی به نام HighlightDirective ایجاد کردیم که با استفاده از دکوریتور @Directive تعریف می‌شود. انتخابگر [appHighlight] تعیین می‌کند که این دستور در هر تگ HTML که این ویژگی را دارد، فعال شود.
در سازنده‌ی کلاس، از ElementRef برای دسترسی مستقیم به عنصر DOM استفاده شده است. این ویژگی به ما اجازه می‌دهد تا ظاهر عنصر را تغییر دهیم. سپس با استفاده از @HostListener، به رویدادهای mouseenter و mouseleave گوش می‌دهیم تا زمانی که کاربر ماوس را روی عنصر ببرد یا از آن خارج شود، رنگ پس‌زمینه تغییر کند.
از طریق @Input می‌توانیم رنگ را از بیرون (مثلاً از HTML) به دستور پاس دهیم تا دستور قابل پیکربندی شود. این ویژگی یکی از اصول مهم انگولار یعنی Data Flow از Parent به Child را نشان می‌دهد.
این نوع دستور نمونه‌ای از یک Attribute Directive است که به تغییر ظاهر یا رفتار عنصر DOM بدون تغییر ساختار HTML کمک می‌کند. این پیاده‌سازی ساده اما حرفه‌ای، پایه‌ای برای توسعه دستورات پیچیده‌تر در پروژه‌های واقعی است.
مثال کاربردی
typescript// auto-focus.directive.ts
import { Directive, ElementRef, OnInit, Input } from '@angular/core';
@Directive({
selector: '[appAutoFocus]'
})
export class AutoFocusDirective implements OnInit {
@Input() delay: number = 0;
constructor(private el: ElementRef) {}
ngOnInit() {
setTimeout(() => {
this.el.nativeElement.focus();
}, this.delay);
}
}
// app.component.html
<input appAutoFocus [delay]="1000" placeholder="به‌صورت خودکار فوکوس می‌شود..." />در این مثال، ما یک دستور سفارشی پیشرفته‌تر به نام AutoFocusDirective پیاده‌سازی کردیم. این دستور با استفاده از چرخه حیات ngOnInit پس از ایجاد کامل DOM فعال می‌شود. با استفاده از ویژگی @Input()، امکان تعیین تأخیر برای اعمال فوکوس فراهم شده است تا کنترل بیشتری بر زمان اجرای منطق داشته باشیم.
الگوی به‌کاررفته در این مثال، data-driven behavior را نشان می‌دهد؛ یعنی رفتار المان مستقیماً بر اساس داده‌هایی که از والد به دستور منتقل می‌شود، کنترل می‌گردد.
این نوع پیاده‌سازی برای ساخت فرم‌های داینامیک، UX بهینه، و کنترل‌های سفارشی در برنامه‌های پیچیده SPA بسیار کاربرد دارد. با رعایت اصول state isolation، این دستورات مستقل از وضعیت کامپوننت عمل می‌کنند و از مشکلاتی مانند prop drilling جلوگیری می‌شود.
در عین حال، اگر مقدار ورودی تغییر کند، می‌توان با استفاده از ngOnChanges() lifecycle hook واکنش‌های پویا ایجاد کرد. این مثال پایه‌ای برای طراحی الگوهای قابل استفاده مجدد در پروژه‌های انگولار محسوب می‌شود.
بهترین شیوه‌ها (Best Practices) و اشتباهات رایج در دستورات سفارشی انگولار شامل موارد زیر است:
- بهترین شیوه‌ها:
* همیشه از@Input()برای قابل پیکربندی بودن دستور استفاده کنید.
* ازRenderer2به جای دسترسی مستقیم به DOM استفاده کنید تا با SSR و امنیت سازگار باشد.
* دستورات را در ماژول جداگانه تعریف کنید تا قابلیت استفاده مجدد افزایش یابد.
* از Lifecycle Hooks برای کنترل دقیق‌تر عملکرد دستور استفاده کنید. - اشتباهات رایج:
* دسترسی مستقیم به DOM باElementRef.nativeElementدر سرور رندرینگ خطا ایجاد می‌کند.
* ایجاد تغییرات زیاد در DOM می‌تواند باعث unnecessary re-render شود.
* اشتباه در مدیریت State بین کامپوننت و دستور ممکن است باعث state mutation ناخواسته شود. - نکات بهینه‌سازی:
* از ChangeDetectionStrategy.OnPush در کامپوننت‌های میزبان استفاده کنید.
* دستورات را فقط در صورت نیاز به تعامل DOM بسازید، نه برای منطق ساده. - امنیت:
* ازRenderer2.setStyle()به جایelement.styleاستفاده کنید.
* از ورودی‌های غیرایمن جلوگیری کنید تا از حملات XSS در دستورات سفارشی جلوگیری شود.
📊 جدول مرجع
| انگولار Element/Concept | Description | Usage Example |
|---|---|---|
| @Directive | برای تعریف دستور سفارشی استفاده می‌شود | @Directive({ selector: '[appCustom]' }) |
| @HostListener | گوش دادن به رخدادهای DOM درون دستور | @HostListener('click') onClick() {...} |
| @Input | دریافت داده از کامپوننت والد | @Input() color: string |
| Renderer2 | تعامل ایمن با DOM بدون وابستگی مستقیم | this.renderer.setStyle(el.nativeElement, 'color', 'red') |
| Lifecycle Hooks | کنترل رفتار دستور در مراحل مختلف چرخه حیات | ngOnInit(), ngOnChanges() |
| ElementRef | دسترسی به المان HTML میزبان | this.el.nativeElement.style.backgroundColor = 'blue' |
جمع‌بندی و مراحل بعدی در انگولار:
در این آموزش، یاد گرفتید که چگونه با استفاده از دستورات سفارشی رفتار المان‌های HTML را کنترل و آن‌ها را به منطق قابل استفاده مجدد تبدیل کنید. این مهارت برای توسعه‌دهندگان پیشرفته انگولار حیاتی است زیرا باعث کاهش تکرار کد، افزایش مقیاس‌پذیری و جداسازی بهتر منطق از رابط کاربری می‌شود.
در گام‌های بعدی، پیشنهاد می‌شود موضوعات Structural Directives مانند *ngIf و *ngFor را مطالعه کنید تا درک کامل‌تری از نحوه تغییر ساختار DOM داشته باشید. همچنین، یادگیری Dependency Injection و Change Detection Strategy به شما کمک می‌کند تا دستورات بهینه‌تر و سریع‌تری طراحی کنید.
برای تمرین، چند دستور ساده مانند تغییر متن، مدیریت Scroll، یا فعال‌سازی حالت تیره طراحی کنید. مطالعه مستندات رسمی انگولار در بخش Directives نیز برای تسلط بیشتر توصیه می‌شود.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود