| خطاف دورة الحياة | وقت التنفيذ في المكون | الاستخدام الشائع والأمثلة |
|---|---|---|
| ngOnChanges | عند تحديث المدخلات (@Input) لأول مرة أو لاحقاً | مراقبة التغييرات القادمة من المكون الأب |
| ngOnInit | مرة واحدة فقط بعد اكتمال تهيئة خصائص المدخلات للمكون | جلب البيانات من خوادم الـ API والتهيئة الأساسية |
| ngOnDestroy | مباشرة قبل إزالة المكون كلياً من الذاكرة والـ DOM | إلغاء الاشتراكات (Unsubscribe) وتنظيف المؤقتات |
في عالم أنجولر الحديث، يمر كل مكون مستقل (Standalone Component) بمراحل ومحطات زمنية مختلفة منذ لحظة إنشائه وحتى تدميره وإزالته من واجهة المستخدم (DOM). تُعرف هذه المحطات بـ خطافات دورة الحياة (Lifecycle Hooks). يتيح لك إطار العمل التدخل في هذه اللحظات البرمجية لتنفيذ مهام محددة مثل جلب البيانات من الخادم، أو تهيئة المتغيرات، أو تنظيف الموارد لمنع استهلاك الذاكرة.
المُنشئ في لغة TypeScript مخصص حصرياً لعملية الحقن التبعي (Dependency Injection) وتهيئة المتغيرات الأساسية. في لحظة إنشاء الـ Constructor، تكون مدخلات المكون القادمة من الخارج (@Input) غير جاهزة بعد.
يضمن لك إطار العمل أن ngOnInit لن تعمل إلا بعد أن يتم حقن جميع التبعيات واستقرار المدخلات، مما يجعلها المكان الآمن والأنسب تماماً لإطلاق طلبات HTTP وجلب البيانات الأولية للمكون.
| 1 | import { Component, OnInit, inject } from '@angular/core'; |
| 2 | import { HttpClient } from '@angular/common/http'; |
| 3 | import { CommonModule } from '@angular/common'; |
| 4 | |
| 5 | @Component({ |
| 6 | selector: 'app-user-profile', |
| 7 | standalone: true, |
| 8 | imports: [CommonModule], |
| 9 | template: ` |
| 10 | <div class="profile-card"> |
| 11 | @if (userData) { |
| 12 | <h2>مرحباً، {{ userData.name }}</h2> |
| 13 | <p>البريد الإلكتروني: {{ userData.email }}</p> |
| 14 | } @else { |
| 15 | <p>جاري تحميل بيانات المستخدم...</p> |
| 16 | } |
| 17 | </div> |
| 18 | ` |
| 19 | }) |
| 20 | export class UserProfileComponent implements OnInit { |
| 21 | private http = inject(HttpClient); |
| 22 | userData: any = null; |
| 23 | |
| 24 | ngOnInit(): void { |
| 25 | // تنفيذ طلب جلب البيانات فور اكتمال تهيئة المكون |
| 26 | this.http.get('https://api.example.com/user/profile').subscribe({ |
| 27 | next: (data) => { |
| 28 | this.userData = data; |
| 29 | }, |
| 30 | error: (err) => { |
| 31 | console.error('فشل في جلب البيانات:', err); |
| 32 | } |
| 33 | }); |
| 34 | } |
| 35 | } |
| 1 | import { Component, OnInit, OnDestroy } from '@angular/core'; |
| 2 | import { interval, Subscription } from 'rxjs'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-timer', |
| 6 | standalone: true, |
| 7 | template: ` |
| 8 | <p>الوقت المنقضي: التشغيل مستمر...</p> |
| 9 | ` |
| 10 | }) |
| 11 | export class TimerComponent implements OnInit, OnDestroy { |
| 12 | private timerSub!: Subscription; |
| 13 | |
| 14 | ngOnInit(): void { |
| 15 | // إنشاء مؤقت زمني يتكرر كل ثانية |
| 16 | this.timerSub = interval(1000).subscribe((val) => { |
| 17 | console.log(`الثانية رقم: ${val}`); |
| 18 | }); |
| 19 | } |
| 20 | |
| 21 | ngOnDestroy(): void { |
| 22 | // إلغاء الاشتراك تماماً عند تدمير المكون لمنع استهلاك الذاكرة (Memory Leak) |
| 23 | if (this.timerSub) { |
| 24 | this.timerSub.unsubscribe(); |
| 25 | console.تم.طباعة('تم إيقاف المؤقت وتنظيف المورد بنجاح'); |
| 26 | } |
| 27 | } |
| 28 | } |