چرخه عمر Angular (Lifecycle)

چرخه عمر در Angular مجموعه‌ای از Hook‌هایی است که به توسعه‌دهندگان این امکان را می‌دهد تا به مراحل مختلف زندگی یک کامپوننت یا دایرکتیو دسترسی داشته باشند. این مراحل تضمین می‌کنند که فرآیندهایی مانند مقداردهی اولیه، تشخیص تغییرات، و تخریب کامپوننت‌ها به صورت روان انجام شود.

فاز ایجاد (Initialization):

ngOnChanges(): این متد زمانی فراخوانی می‌شود که هر یک از پراپرتی‌های ورودی (Input) مقدارشان تغییر کند. این اولین متدی است که پس از مقداردهی اولیه پراپرتی‌ها اجرا می‌شود.

ngOnInit(): تنها یک‌بار بعد از اجرای اولین ngOnChanges() فراخوانی می‌شود و معمولاً برای مقداردهی اولیه و تنظیم منطق کامپوننت استفاده می‌شود.

فاز تشخیص تغییرات (Change Detection):

ngDoCheck(): در هر اجرای تشخیص تغییرات (Change Detection) فراخوانی می‌شود. برای تعریف منطق سفارشی تغییرات استفاده می‌شود.

ngAfterContentInit(): پس از مقداردهی محتوای داخلی (HTML که از طریق <ng-content> تزریق شده است) فراخوانی می‌شود.

ngAfterContentChecked(): بعد از هر بررسی محتوای تزریق‌شده اجرا می‌شود.

فاز مقداردهی ویو (View Initialization):

ngAfterViewInit(): بعد از مقداردهی ویوی کامپوننت و ویوهای فرزند آن فراخوانی می‌شود.

ngAfterViewChecked(): بعد از هر بررسی ویوی کامپوننت و ویوهای فرزند آن اجرا می‌شود.

فاز تخریب (Destruction):

ngOnDestroy(): دقیقاً قبل از تخریب کامپوننت اجرا می‌شود. این متد برای پاکسازی منابع مانند لغو اشتراک از Observables یا حذف Event Listenerها استفاده می‌شود.

نمایش چرخه عمر به صورت نمودار

                   چرخه عمر کامپوننت/دایرکتیو
                               ┌─────────────┐
                               │ ngOnChanges │
                               └─────────────┘
                                     ↓
                               ┌───────────┐
                               │ ngOnInit  │
                               └───────────┘
                                     ↓
                               ┌────────────┐
                               │ ngDoCheck  │
                               └────────────┘
                                     ↓
               ┌────────────────────────────────────────┐
               │                                        │
        ┌───────────────┐                       ┌───────────────┐
        │ ngAfterContent│                       │ ngAfterView    │
        │ Init          │                       │ Init           │
        └───────────────┘                       └───────────────┘
               ↓                                        ↓
        ┌───────────────┐                       ┌───────────────┐
        │ ngAfterContent│                       │ ngAfterView    │
        │ Checked       │                       │ Checked        │
        └───────────────┘                       └───────────────┘
                                     ↓
                               ┌─────────────┐
                               │ ngOnDestroy │
                               └─────────────┘

توضیح نمودار

جریان از بالا به پایین: هر Hook در یک ترتیب خاص اجرا می‌شود، از ngOnChanges (هنگامی که پراپرتی ورودی تغییر می‌کند) شروع شده و به ngOnDestroy (وقتی کامپوننت در حال تخریب است) ختم می‌شود.

مراحل موازی: برخی از Hook‌ها مانند ngAfterContentInit و ngAfterViewInit به صورت مستقل اجرا می‌شوند اما ترتیب مشابهی را دنبال می‌کنند.

مثال کاربردی

import { Component, Input, OnInit, OnChanges, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-lifecycle-demo',
  template: `<p>Lifecycle Demo Component</p>`
})
export class LifecycleDemoComponent implements OnInit, OnChanges, OnDestroy {
  @Input() data: string;

  ngOnChanges() {
    console.log('ngOnChanges - data changed:', this.data);
  }

  ngOnInit() {
    console.log('ngOnInit - component initialized');
  }

  ngOnDestroy() {
    console.log('ngOnDestroy - component destroyed');
  }
}