دستورات ویژگی
دستورات ویژگی در انگولار مکانیزمی قدرتمند هستند که به توسعه‌دهندگان اجازه می‌دهند رفتار، استایل یا ویژگی‌های DOM عناصر را به‌صورت دینامیک تغییر دهند بدون آنکه ساختار عناصر تغییر کند. این دستورات بخش حیاتی توسعه برنامه‌های مدرن Single-Page Application (SPA) هستند، زیرا امکان ایجاد رابط‌های کاربری تعاملی، مدولار و قابل استفاده مجدد را فراهم می‌کنند. با استفاده از دستورات ویژگی، توسعه‌دهندگان می‌توانند به‌صورت declarative رفتار عناصر را بر اساس state کامپوننت، داده‌های ورودی کاربر یا تغییرات داده‌های خارجی کنترل کنند.
در توسعه انگولار، دستورات ویژگی زمانی کاربرد دارند که نیاز باشد استایل یا رفتار یک عنصر به‌صورت دینامیک تغییر کند، مانند هایلایت کردن، اعمال کلاس CSS بر اساس شرایط، یا تغییر یک property متناسب با state کامپوننت. این دستورات با مفاهیم اصلی انگولار مانند components، state management، جریان داده (data flow) و lifecycle hooks هماهنگ کار می‌کنند تا قابلیت نگهداری و توسعه‌پذیری بالایی ایجاد کنند.
در این آموزش، شما خواهید آموخت چگونه دستورات ویژگی بسازید، از Input properties برای دریافت داده از کامپوننت والد استفاده کنید، با HostListener تعاملات کاربر را مدیریت کنید و از lifecycle hooks مانند OnChanges برای پاسخ به تغییرات دینامیک بهره ببرید. همچنین به بهینه‌سازی عملکرد و جلوگیری از مشکلات رایجی مانند prop drilling، re-renders غیرضروری و mutations در state پرداخته خواهد شد.
مثال پایه
typescriptimport { Directive, ElementRef, Renderer2, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
@Input() highlightColor: string = 'yellow';
constructor(private el: ElementRef, private renderer: Renderer2) {}
@HostListener('mouseenter') onMouseEnter() {
this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', this.highlightColor);
}
@HostListener('mouseleave') onMouseLeave() {
this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
}
}در این مثال یک دستور ویژگی ساده ساخته شده که رنگ پس‌زمینه یک عنصر را هنگام حرکت موس تغییر می‌دهد. decorator @Directive selector دستور را مشخص می‌کند تا بتوان آن را به صورت attribute در template استفاده کرد. با @Input property highlightColor، دستور ویژگی قابل تنظیم و قابل استفاده مجدد می‌شود و کامپوننت والد می‌تواند رنگ را تعیین کند.
با استفاده از HostListener، رویدادهای mouseenter و mouseleave شنیده می‌شوند و تغییرات مربوطه اعمال می‌شوند. Renderer2 برای manipulation ایمن و سازگار با Angular استفاده شده است، که از مشکلات مرتبط با bypass کردن change detection جلوگیری می‌کند. این الگو باعث می‌شود logic از کامپوننت جدا شود، مشکلات prop drilling و re-renders غیرضروری کاهش یابند و کد maintainable و modular شود.
مثال کاربردی
typescriptimport { Directive, ElementRef, Renderer2, HostListener, Input, OnChanges, SimpleChanges } from '@angular/core';
@Directive({
selector: '[appDynamicHighlight]'
})
export class DynamicHighlightDirective implements OnChanges {
@Input() appDynamicHighlight: string = 'lightblue';
constructor(private el: ElementRef, private renderer: Renderer2) {}
ngOnChanges(changes: SimpleChanges) {
if (changes['appDynamicHighlight']) {
this.updateBackgroundColor(this.appDynamicHighlight);
}
}
@HostListener('mouseenter') onMouseEnter() {
this.updateBackgroundColor(this.appDynamicHighlight);
}
@HostListener('mouseleave') onMouseLeave() {
this.updateBackgroundColor('');
}
private updateBackgroundColor(color: string) {
this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
}
}این مثال پیشرفته تغییرات دینامیک را مدیریت می‌کند. lifecycle hook ngOnChanges برای تشخیص تغییرات در input property استفاده شده تا رنگ پس‌زمینه عنصر بروزرسانی شود. متد updateBackgroundColor مسئول اعمال تغییرات DOM به صورت متمرکز است و کد را DRY و maintainable نگه می‌دارد.
HostListener تعاملات کاربر را کنترل می‌کند و Renderer2 تغییرات را ایمن و سازگار با Angular اعمال می‌کند. این الگو برای کاربردهای واقعی مانند dynamic theming، فرم‌های تعاملی و لیست‌های قابل هایلایت مفید است. ترکیب Input properties، lifecycle hooks و event listeners امکان ساخت directives modular، performative و reusable را فراهم می‌کند.
بهترین شیوه‌ها در انگولار شامل جداسازی logic از template، استفاده از Renderer2 برای تغییرات ایمن DOM و بهره‌گیری از lifecycle hooks برای مدیریت تغییرات دینامیک است. استفاده از Input properties برای کنترل state دستور ویژگی توصیه می‌شود.
خطاهای رایج شامل prop drilling، re-renders غیرضروری و تغییرات مستقیم در DOM است. برای بهینه‌سازی عملکرد، محاسبات سنگین را در رویدادهای پرتکرار انجام ندهید. ملاحظات امنیتی شامل جلوگیری از XSS هنگام استفاده از innerHTML یا محتوای کاربر است. Angular DevTools ابزار مناسبی برای debugging و تحلیل عملکرد directives فراهم می‌کند.
📊 جدول مرجع
| انگولار Element/Concept | Description | Usage Example |
|---|---|---|
| @Directive | تعریف دستور ویژگی سفارشی | @Directive({selector: '[appHighlight]'}) |
| @Input | دریافت داده از کامپوننت والد | @Input() highlightColor: string |
| HostListener | گوش دادن و پاسخ به رویدادهای DOM | @HostListener('mouseenter') onMouseEnter() |
| Renderer2 | تغییرات امن و سازگار با Angular در DOM | this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow') |
| OnChanges | تشخیص تغییرات input properties | ngOnChanges(changes: SimpleChanges) |
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود