Lifecycle Hooks

אנגולר נותן לנו אפשרות להתחבר לפונקציות שונות במחזור החיים של הקומפוננטה או ה-directive.

Lifecycle Hooks הן פונקציות מיוחדות של אנגולר שמאפשרות לנו "להתחבר" (hook) לשלבים שונים במחזור החיים של הקומפוננטה ולבצע שם פעולות. רנגולר מנהל את היצירה, העדכון וההריסה של הקומפוננטה ואנחנו יכולים להשיג שליטה טובה יותר בקומפוננטה כשאנחננו מתחברים לתהליכים האלה.

יש שלושה Lifecycle Hooks שהשימוש בהם נפוץ.

ngOnInit

הפונקציה ngOnInit נקראת פעם אחת בעת היצירה של הקומפוננטה. בפונקציה ngOnInit יש לנו גישה למשתנים שהגיעו אלינו מקומפוננטת אב, רק אחרי הקריאה ל-ngOnInit הם יהיו זמינים בקומפוננטה. ה-constructor שנקרא לפני ngOnInit לא יהיה עם גישה למשתנים האלה.

בפונקציה ngOnInit יהיו בדרך כלל איתחולים של משתנים.

ngOnChanges

הפונקציה ngOnChanges נקראת בכל פעם שמועבר משתנה לקומפוננטת ההורה לילד או משתנה הערך שלו, בקיצור בכל פעם שמקבלים מידע מההורה. יש קריאה ראשונה לפונקציה בזמן יצירת הקומפוננטה כמו ngOnInit.

ngOnDestroy

הפונקציה ngOnDestroy נקראת כשאנגולר הולך להוריד את הקומפוננטה מהמסך. בפונקציה הזאת יהיו ניקיונות שנרצה לעשות כשיורדת הקומפוננטה.

כדי ליישם את הפונקציות האלה אפשר, אך לא חובה, לעשות implement בקומפוננטה ל-interface של הפונקציה.

export class ModalComponent implements OnInit {
  constructor(){
  }

  ngOnInit(){
  }
}

ניווט במאמר

מאמרים אחרונים

Weekly Tutorial