در حال بارگذاری...

مرجع دکوراتورها

در انگولار، دکوراتورها (Decorators) توابع ویژه‌ای هستند که به کلاس‌ها، پروپرتی‌ها، متدها یا پارامترها متادیتا اضافه می‌کنند و به فریمورک اطلاع می‌دهند که این عناصر چگونه باید رفتار کنند. مرجع دکوراتورها در انگولار اهمیت بالایی دارد زیرا پایه‌ای برای ساخت کامپوننت‌های قابل استفاده مجدد، مدیریت state، جریان داده و کنترل چرخه حیات (lifecycle) در برنامه‌های مدرن وب و SPA است.
دکوراتورهای اصلی شامل @Component، @Directive، @Pipe، @Injectable و @NgModule هستند. @Component برای تعریف کامپوننت‌های UI، @Directive برای ایجاد دستورات سفارشی، @Pipe برای تبدیل داده‌ها در template، @Injectable برای تزریق وابستگی‌ها و @NgModule برای سازماندهی کلاس‌ها در ماژول استفاده می‌شوند. دکوراتورهای اضافی مانند @Input و @Output جریان داده بین کامپوننت‌های والد و فرزند را مدیریت می‌کنند و @ViewChild و @ContentChild دسترسی به فرزند یا محتوای project شده را ممکن می‌سازند.
این مرجع به توسعه‌دهندگان کمک می‌کند تا با بهترین شیوه‌ها، مثال‌های عملی و تکنیک‌های بهینه‌سازی، کامپوننت‌های scalable و maintainable بسازند و از اشتباهاتی مانند prop drilling، رندرهای غیرضروری و تغییر مستقیم state جلوگیری کنند. پس از مطالعه این مرجع، خواننده قادر خواهد بود دکوراتورها را به طور مؤثر در پروژه‌های واقعی انگولار پیاده‌سازی کند.

مثال پایه

typescript
TYPESCRIPT Code 
import { Component, Input } from '@angular/core';

@Component({
selector: 'app-user-card',
template: `     <div class="card">       <h2>{{ name }}</h2>       <p>سن: {{ age }}</p>     </div>
`,
styles: [`     .card {
padding: 16px;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
`]
})
export class UserCardComponent {
@Input() name!: string;
@Input() age!: number;
}

در این مثال، دکوراتور @Component کلاس UserCardComponent را به یک کامپوننت قابل استفاده مجدد تبدیل می‌کند. selector برای تعریف تگ HTML کامپوننت استفاده می‌شود و template و styles ظاهر و استایل کامپوننت را مشخص می‌کنند. دکوراتورهای @Input به کامپوننت اجازه می‌دهند داده‌ها را از والد دریافت کند که از prop drilling جلوگیری می‌کند و مدیریت state را ساده‌تر می‌سازد.
چرخه حیات انگولار به صورت خودکار initialization، render و destruction کامپوننت را مدیریت می‌کند. تغییرات در @Input پروپرتی‌ها باعث به‌روزرسانی خودکار view می‌شود و رندرهای غیرضروری کاهش می‌یابد. این مثال نشان می‌دهد که چگونه دکوراتورها جریان داده، مدیریت state و ساختار کامپوننت را در پروژه‌های واقعی کنترل می‌کنند.

مثال کاربردی

typescript
TYPESCRIPT Code 
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
selector: 'app-counter',
template: `     <div class="counter">       <h3>شمارنده: {{ count }}</h3>       <button (click)="increment()">+</button>       <button (click)="decrement()">-</button>     </div>
`,
styles: [`     .counter {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
}
`]
})
export class CounterComponent {
@Input() count: number = 0;
@Output() countChange = new EventEmitter<number>();

increment() {
this.count++;
this.countChange.emit(this.count);
}

decrement() {
this.count--;
this.countChange.emit(this.count);
}
}

Advanced انگولار Implementation

typescript
TYPESCRIPT Code 
import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';

@Component({
selector: 'app-smart-counter',
template: `     <div class="smart-counter">       <h3>شمارنده هوشمند: {{ value }}</h3>       <button (click)="increase()">+</button>       <button (click)="decrease()">-</button>     </div>
`,
styles: [`     .smart-counter {
background-color: #e0f7fa;
padding: 16px;
border-radius: 12px;
text-align: center;
}
`]
})
export class SmartCounterComponent implements OnInit, OnChanges {
@Input() value: number = 0;
@Output() valueChange = new EventEmitter<number>();

ngOnInit() {
console.log('SmartCounter initialized with value:', this.value);
}

ngOnChanges(changes: SimpleChanges) {
if (changes['value']) {
console.log('Value changed:', changes['value'].currentValue);
}
}

increase() {
this.value++;
this.valueChange.emit(this.value);
}

decrease() {
this.value--;
this.valueChange.emit(this.value);
}
}

SmartCounterComponent با استفاده از دکوراتورهای @Input و @Output و lifecycle hooks مانند OnInit و OnChanges داده‌ها را به‌صورت واکنش‌گرا مدیریت می‌کند و تغییرات را به والد اعلام می‌کند. دکوراتورها این کامپوننت را قابل استفاده مجدد، بهینه و ایمن می‌سازند و از prop drilling و رندرهای غیرضروری جلوگیری می‌کنند. این ترکیب جریان داده و مدیریت state را کنترل می‌کند و کامپوننتی scalable و maintainable ایجاد می‌نماید.

بهترین شیوه‌ها و خطاهای رایج: از @Input فقط برای داده‌های ضروری و از @Output برای eventهای مشخص استفاده کنید. از تغییر مستقیم state و prop drilling بیش از حد خودداری کنید. برای بهبود عملکرد، ChangeDetectionStrategy.OnPush را اعمال نمایید. با استفاده از Angular DevTools فعالیت lifecycle و EventEmitter را پایش کنید. از تزریق داده‌های ناامن پرهیز و template checking را فعال نمایید. استفاده صحیح از دکوراتورها به ساخت اپلیکیشن‌های انگولار امن، بهینه و مقیاس‌پذیر کمک می‌کند.

📊 مرجع کامل

انگولار Element/Method Description Syntax Example Notes
@Component تعریف یک کامپوننت @Component({...}) @Component({ selector:'app-demo', template:'...' }) پرکاربردترین دکوراتور
@Directive ایجاد دستور سفارشی @Directive({...}) @Directive({ selector:'[highlight]' }) برای رفتار DOM
@Pipe تبدیل داده @Pipe({...}) @Pipe({name:'capitalize'}) برای تغییر نمایش داده‌ها
@NgModule تعریف ماژول @NgModule({...}) @NgModule({ declarations:[], imports:[] }) سازماندهی کامپوننت‌ها
@Injectable تزریق وابستگی @Injectable({...}) @Injectable({ providedIn:'root' }) مورد نیاز برای DI
@Input ورودی کامپوننت @Input() prop:type @Input() title:string دریافت داده از والد
@Output خروجی کامپوننت @Output() event=new EventEmitter() @Output() clicked=new EventEmitter() ارسال داده به والد
@HostListener شنود eventهای DOM @HostListener('click') handler(){} @HostListener('window:scroll') onScroll() بایندینگ event
@ViewChild دسترسی به فرزند @ViewChild(ChildComponent) child!:ChildComponent دستکاری instance
@ContentChild دسترسی به محتوای project شده @ContentChild(TemplateRef) tpl!:TemplateRef مدیریت template content
@HostBinding بایندینگ property ها @HostBinding('class.active') isActive=true بایندینگ داینامیک DOM

📊 Complete انگولار Properties Reference

Property Values Default Description انگولار Support
selector string none selector کامپوننت تمام نسخه‌ها
template string none template کامپوننت 2+
styles array string[] none CSS کامپوننت
providers array [] Dependency providers 2+
inputs array [] لیست @Input 4+
outputs array [] لیست @Output 4+
animations array [] انیمیشن‌ها 4+
changeDetection string 'Default' استراتژی Change Detection 5+
encapsulation string 'Emulated' CSS encapsulation 2+
standalone boolean false کامپوننت standalone 14+
imports array [] ماژول‌های وارد شده 14+
schemas array [] اجازه عناصر سفارشی 9+

یادگیری مرجع دکوراتورها در انگولار به توسعه‌دهندگان امکان می‌دهد کامپوننت‌های قابل استفاده مجدد، بهینه و مقیاس‌پذیر بسازند. این دانش جریان داده، مدیریت state و چرخه حیات را کنترل می‌کند. گام بعدی شامل یادگیری Dependency Injection، lifecycle hooks، Change Detection Strategy و مدیریت داده‌های asynchronous با RxJS است. این مهارت‌ها مسیر حرفه‌ای در توسعه انگولار را هموار می‌سازند.

کلیدواژه‌های مرتبط

کاربران همچنین با این عبارات این محتوا را جستجو می‌کنند:

دکوراتورها انگولار مرجع دکوراتورها انگولار مثال @Component انگولار data binding انگولار lifecycle hooks انگولار کامپوننت‌های قابل استفاده مجدد انگولار مدیریت state انگولار بهینه‌سازی عملکرد انگولار @Input @Output انگولار توسعه SPA انگولار Angular DevTools کامپوننت‌های پیشرفته انگولار EventEmitter انگولار ChangeDetection strategy انگول

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
3
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 1 از 1
Angular آموزش