9. خطافات دورة حياة المكون

تمر المكونات بدورة حياة: يقوم Angular بإنشائها، وعرضها، والتحقق مما إذا كانت خصائصها المرتبطة بالبيانات قد تغيرت، وأخيراً تدميرها قبل إزالتها من DOM. يوفر Angular خطافات (طرق واجهة) يمكنك تنفيذها للاستفادة من هذه اللحظات الرئيسية.

الخطافات الأكثر شيوعاً

تنفيذ OnInit و OnDestroy

نقوم بتنفيذ الواجهة المقابلة لضمان الوفاء بالعقد وتوفير الطريقة المطلوبة.

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

@Component({ ... }) export class ClockComponent implements OnInit, OnDestroy { currentTime: string = ''; private timerInterval: any;

// 1. منطق التهيئة ngOnInit(): void { console.log('ClockComponent initialized. Starting timer.'); this.timerInterval = setInterval(() => { this.currentTime = new Date().toLocaleTimeString(); }, 1000); }

// 2. منطق التنظيف ngOnDestroy(): void { console.log('ClockComponent destroyed. Clearing timer.'); if (this.timerInterval) { clearInterval(this.timerInterval); } } }

يُعد استخدام ngOnDestroy أمراً بالغ الأهمية لمنع تسرب الذاكرة (memory leaks)، خاصة عند التعامل مع الاشتراكات أو الفواصل الزمنية التي تستمر خارج وجود المكون.