در Angular هر کامپوننت و دایرکتیو یک چرخه حیات مشخص دارد. از لحظه‌ای که کامپوننت ساخته می‌شود تا زمانی که از بین می‌رود، Angular در مراحل مختلفی وارد عمل می‌شود و Hookهای خاصی را اجرا می‌کند.
درک صحیح Lifecycle Hooks باعث می‌شود بتوانیم:

  • رفتار کامپوننت را پیش‌بینی‌پذیر کنیم
  • زمان مناسب برای اجرای منطق مهم را انتخاب کنیم
  • داده‌ها و DOM را درست مدیریت کنیم
  • خطاها و Memory Leak را کاهش دهیم

در این جلسه با تمام Lifecycle Hookهای مهم Angular 17 آشنا می‌شویم و کاربرد عملی هرکدام را توضیح می‌دهیم.

Lifecycle Hooks چیست؟

Lifecycle Hooks متدهایی هستند که Angular هنگام تغییر وضعیت کامپوننت آن‌ها را فراخوانی می‌کند.
این اتفاق‌ها شامل موارد زیر است:

  • ساخت کامپوننت
  • مقداردهی ورودی‌ها
  • نمایش اولیه View
  • تغییر داده‌ها
  • تغییر View
  • از بین رفتن کامپوننت

Angular اجازه می‌دهد ما در این نقاط وارد جریان شویم و منطق خودمان را اجرا کنیم.

دسته‌بندی Lifecycle Hooks در Angular 17

Angular چندین Hook رسمی دارد که در ۳ گروه اصلی دسته‌بندی می‌شوند:

1) مرحله ساخت و مقداردهی کامپوننت (Initialization)

  • constructor
  • ngOnChanges
  • ngOnInit

2) مرحله تغییرات و رندرگیری (Change Detection & Rendering)

  • ngDoCheck
  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewChecked

3) مرحله از بین رفتن کامپوننت (Destroy)

  • ngOnDestroy

در ادامه همه را با مثال و کاربرد توضیح می‌دهیم.

۱. constructor — سازنده کلاس

اولین متدی که هنگام ایجاد شیء کامپوننت اجرا می‌شود.

نکته مهم

  • برای کارهای Angular استفاده نمی‌شود.
  • فقط برای Inject کردن سرویس‌ها مناسب است.

کاربردهای صحیح

  • تزریق سرویس
  • مقداردهی اولیه متغیرهای داخلی کلاس

۲. ngOnChanges — واکنش به تغییر ورودی‌ها

این Hook هر بار که یک @Input مقدار جدید بگیرد اجرا می‌شود.

کاربرد

در کامپوننت‌هایی که دیتا از Parent دریافت می‌کنند.

چرا مهم است؟

اگر نیاز است زمانی که مقدار ورودی تغییر کرد یک منطق اجرا شود، اینجا انجام می‌دهیم.

۳. ngOnInit — شروع رسمی کامپوننت

پس از اجرای اولین ngOnChanges و فقط یک بار اجرا می‌شود.

بهترین زمان برای:

  • ارسال درخواست به API
  • مقداردهی داده‌ها
  • آماده‌سازی اولیه کامپوننت

نکته

منطق مهم اولیه را در constructor قرار ندهید؛ جای درستش ngOnInit است.

۴. ngDoCheck — کنترل دستی تغییرات

این Hook در هر چرخه Change Detection اجرا می‌شود.

کاربرد واقعی

زمانی که Angular تغییرات شما را تشخیص نمی‌دهد، مثلاً:

  • تغییر عمیق در آبجکت‌ها
  • تغییر در آرایه‌ها بدون تغییر Reference
  • نیاز به الگوریتم سفارشی برای Change Detection

۵. ngAfterContentInit — مقداردهی محتوای projected

این Hook زمانی اجرا می‌شود که Angular محتوای <ng-content> را داخل کامپوننت قرار داده باشد.

کاربرد

در کامپوننت‌هایی که محتوای خارجی در آن‌ها استفاده می‌شود (Content Projection).

۶. ngAfterContentChecked — بررسی مجدد محتوای projected

پس از هر تغییر محتوا و در هر چرخه Change Detection اجرا می‌شود.

کاربرد

کم یاب، اما برای ردیابی تغییرات محتوا مفید است.

۷. ngAfterViewInit — مقداردهی View

زمانی اجرا می‌شود که:

  • View کامپوننت
  • View Childها
  • DOM داخلی

به‌طور کامل ساخته شده باشند.

کاربرد

اگر نیاز به دسترسی به:

  • @ViewChild
  • DOM Element
  • کتابخانه‌های UI خارجی

دارید، تنها زمان امن این Hook است.

۸. ngAfterViewChecked — بررسی مجدد View

این Hook پس از هر بار Change Detection تکرار می‌شود.

کاربرد

معمولاً برای Debug
ولی بهتر است از آن برای منطق سنگین استفاده نکنید.

۹. ngOnDestroy — پاک‌سازی قبل از تخریب کامپوننت

آخرین Hook در چرخه حیات.

کاربردهای مهم

  • لغو Subscriptionها
  • پاک کردن تایمرها
  • جلوگیری از Memory Leak
  • لغو WebSocket
  • آزاد کردن منابع

نکته

استفاده از این Hook در پروژه‌های واقعی بسیار ضروری است.

ترتیب اجرای Lifecycle Hooks در Angular 17

اجرای Hookها به شکل زیر است:

  1. constructor
  2. ngOnChanges
  3. ngOnInit
  4. ngDoCheck
  5. ngAfterContentInit
  6. ngAfterContentChecked
  7. ngAfterViewInit
  8. ngAfterViewChecked
  9. (تکرار ۴ تا ۸ در هر تغییر)
  10. ngOnDestroy

نکات مهم درباره Lifecycle Hooks

1. همیشه cleanup را جدی بگیرید

کامپوننت‌هایی که ngOnDestroy ندارند، ممکن است Memory Leak ایجاد کنند.

2. از اجرای منطق DOM در ngOnInit پرهیز کنید

چون DOM هنوز کامل ساخته نشده؛ باید از ngAfterViewInit استفاده کنید.

3. ngDoCheck فقط برای کارهای ضروری

چون در هر Change Detection اجرا می‌شود و ممکن است باعث افت Performance شود.

4. در Standalone Components هیچ تفاوتی وجود ندارد

تمام Hookها دقیقاً مثل نسخه‌های قبلی Angular عمل می‌کنند.

مثال از یک کامپوننت با همه Lifecycle Hooks

(نسخه ساده و قابل فهم — بدون HTML اضافی)

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

@Component({
  selector: 'app-test',
  standalone: true,
  template: `<p>Test Component</p>`
})
export class TestComponent implements OnInit, OnChanges, OnDestroy {

  @Input() title = '';

  constructor() {
    console.log('constructor');
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges', changes);
  }

  ngOnInit() {
    console.log('ngOnInit');
  }

  ngOnDestroy() {
    console.log('ngOnDestroy');
  }
}

جمع‌بندی

در جلسه ۸ با همه Lifecycle Hookهای Angular 17 آشنا شدیم. یاد گرفتیم:

  • Angular چگونه کامپوننت‌ها را مدیریت می‌کند
  • چه زمانی باید منطق مهم را اجرا کنیم
  • چگونه از Memory Leak جلوگیری کنیم
  • بهترین زمان استفاده از ViewChild و DOM چه زمانی است
  • مهم‌ترین Hookها در پروژه‌های واقعی کدام‌اند

این موضوع پایه‌ای برای مباحث بعدی مثل Change Detection، ارتباط کامپوننت‌ها، و Performance است.

دسترسی به ویدیوهای کامل دوره

برای مشاهده ویدیوهای کامل هر جلسه، دریافت تمرین‌ها، فایل‌ها و پشتیبانی، می‌توانید دوره کامل را تهیه کنید.

آموزش جامع Angular 17 تا 21 | از مبتدی تا پیشرفته + پروژه‌محور