კომპონენტების სიცოცხლის ციკლის ჰუკები (Angular lifcycle hooks)

ანგულარში კომპონენტს აქვს სიცოცხლის ციკლი, რომელსაც ეწოდება ინგლისურად lifcycle და ეს სიცოცხლის ციკლი იწყება მაშინ, როდესაც ანგულარი ქმნის კლასს და არენდერებს კომპონენტის ხილულ ნაწლის (view)-ს.

სიცოცხლის ციკლი ანგულარში გრძელდება ცვლილებების დეტექტორით (change detection), რომლის დროსაც ანგულარი ამოწმებს კომპონენტის თვისებების ცვლილებას და ამის შემდეგ ის ანახლებს როგორც კომპონენტის ხილულ ნაწილს (view)-ს ასევე კომპონენტის (.ts) ფაილის მდგომარეობას (instance)-ს

სიცოცხლის ციკლი (lifecycle) სრულდება მაშინ, როდესაც ანგულარი გაანადგურებს შექმნილ კომპონენტს (destroys), ანუ დარენდერებულ DOM-ს.

ანგულარს აქვს ჩაშენებული სიცოცხლის ციკლის "ჰუკების" მეთოდები (lifecycke hooks methods) რომლებიც საშუალებას გვაძლევს ჩავებათ ცვლილებების დეტექციის დროს, მაგალითად ngOnDestroy() მეთოდია როდესაც ანგულარი ანადგურებს კომპონენტს.

მაგალითი:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnDestroy {
  ngOnDestroy(): void {
    console.log('component is destroyed');
  }
}

მოცემულ მაგალითში ვიყენებთ ngOnDestroy() "ჰუკს", როდესაც ანგულარის ცვლილებების დეტექტორი (change detector) გაანადგურებს კომპონენტს კონსოლში დაიბეჭდება "component is destroyed" ტექსტი.

ანგულარში ყველა სიცოცხლის ციკლის "ჰუკს" (lifecycle hooks) აქვ თავისი ინტერფეისი, ხოლო მეთოდს აქვს პრეფიქსი ng, თუ ზემოთ მოცემულ მაგალითს დააკვირდებით დაინახავთ რომ ინტერფეისის სახელია OnDestroy, ხოლო მეთოდის სახელი ngOnDestroy()

ანგულარ აპლიკაციის დაწერისას არაა აუცილებელი მოთხოვნა გამოვიყენოთ რომელიმე სიცოცხლის ციკლი თუ ის არ გვჭირდება.

სიცოცხლის ციკლის თანმიმდევრობა

მას შემდეგ, რაც ჩვენი აპლიკაცია ქმნის კომპონენტის ან დირექტივის ინიციალიზაციას მისი კლასის კონსტრუქტორის დახმარებით, შემდეგ ანგულარი შეასრულებს სიცოცხლის ციკლის "ჰუკებს" შემდეგი თანმიმდევრობით