Angular-ի ngOnDestroy հուքը

ngOnDestroy հուքն աշխատում է, երբ կոմպոնենտը հեռացվում է: Այս հուքում դուք կարող եք ազատել ռեսուրսները, հեռացնել տարրերի իրադարձությունների բաժանորդագրությունը, դադարեցնել թայմերները և այլն:

Կոմպոնենտի ստեղծումն ու հեռացումը Angular-ում տեղի է ունենում, երբ այն ռեակտիվ ցուցադրվում է կամ թաքնվում if պայմանի միջոցով: Այսինքն՝ Angular-ը պարզապես չի թաքցնում կոմպոնենտները, այլ հեռացնում է դրանք և հետ վերադարձնում:

Բացի այդ, կոմպոնենտները ստեղծվում և հեռացվում են, երբ դրանք ռեակտիվ կերպով վերադասավորվում են ցիկլերում: Այս դեպքում Angular-ը նույնպես ստեղծում և հեռացնում է կոմպոնենտները:

Եկեք փորձենք գործնականում: Ներմուծենք OnDestroy ինտերֆեյսը:

app/user/user.component.tsimport { OnDestroy } from '@angular/core';

Միացնենք այն դասին:

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  
}

Իսկ հիմա գրենք մեր հուքը:

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  constructor() {
    console.log('constructor is started');
  }
  
  ngOnDestroy() {
    console.log('onDestroy is applied');
  }
}
Задание 1

Կատարեք ռեակտիվ if, որի միջոցով կցուցադրվի child կոմպոնենտը: Ստուգեք ուսումնասիրված հուքի աշխատանքը:

Задание 2

Ծնող կոմպոնենտում տրված է օգտատերերի անունների զանգված: Ստեղծեք child կոմպոնենտ օգտատիրոջ համար: Զանգվածը ցիկլով վերադասավորեք և արտածեք օգտատերերի կոմպոնենտները: Ստեղծեք կոճակ, որի սեղմման դեպքում զանգվածից տարրերը կհեռացվեն: Ստուգեք, որ child կոմպոնենտներում հեռացման հուքը կաշխատի: