Angular hayotiy sikl hooklari

Lifecycle (hayotiy sikl) hook’lari — Angular muhim daqiqalarda (yaratish, input o‘zgarishlari, view’ning ishga tushishi, yo‘q qilish) chaqiradigan metodlar; ular yordamida sozlash, o‘zgarishlarga javob berish, shablon havolalariga (template refs) murojaat qilish va tozalash ishlarini bajarishingiz mumkin.

Hayotiy sikl asoslari

• Nima: lifecycle (hayotiy sikl) hook’lari — Angular muhim paytlarda (init, input o‘zgarishlari, view init, destroy) chaqiradigan metodlar.
• O‘rnatish: Kirishlar o‘rnatilgandan keyin ngOnInit dan foydalaning.
• React: ngOnChanges-dagi kirish o‘zgarishlarini boshqaring.
• DOM tayyor: @ViewChild referatlariga kirish uchun ngAfterViewInit-dan foydalaning.
• Tozalash: ngOnDestroy-da taymerlarni/obunalarni/tinglovchilarni chiqaring.

import { OnInit, OnDestroy, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

export class Demo implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild('box') box!: ElementRef<HTMLInputElement>;
  intervalId: any;
  ngOnInit() { /* setup after inputs */ }
  ngAfterViewInit() { this.box.nativeElement.focus(); }
  ngOnDestroy() { clearInterval(this.intervalId); }
}

// Template: <input #box>

Misol tushuntirildi

• ngOnInit: allaqachon bog‘langan kirishlarni talab qiladigan sozlashni ishga tushiring.
• @ViewChild + ngAfterViewInit: Ko‘rinish ishga tushirilgandan keyingina kirishga kirish va fokuslash.
• ngOnDestroy: Oqishning oldini olish uchun taymerlarni/tinglovchilarni tozalang.

Lifecycle (hayotiy sikl) hook’lari

• Hayotiy siklni almashtirish: Komponentni ko‘rsatish (masalan, *ngIf bilan) ngOnInit-ni ishga tushiradi; uni yashirish uchun ngOnDestroy ishlaydi.
• Ishni bajarish/bekor qilish: Init-da taymerlarni/obunalarni ishga tushirish, yo‘q qilishda o‘chirish/obunani bekor qilish.

export class Child implements OnInit, OnDestroy {
  intervalId: any;
  ngOnInit() { this.intervalId = setInterval(() => {/* ... */}, 1000); }
  ngOnDestroy() { clearInterval(this.intervalId); }
  // <child-cmp *ngIf="show"></child-cmp>

Misol tushuntirildi

• ngOnInit: component yaratilganda taymerni ishga tushiradi.
• ngOnDestroy: component o‘chirilganda taymerni o‘chiradi.
• *ngIf: shartni almashtirish ichki (child) komponentni yaratadi/yo‘q qiladi va hook’larni chaqiradi.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';

{{ ... }}
  show = true;
  toggle() { this.show = !this.show; }
}

bootstrapApplication(App);

<app-root></app-root>

Misol tushuntirildi

• Almashtirish: Bolani qo‘shish/o‘chirish uchun tugma show ni aylantiradi.
• Harakatdagi hook’lar: bolani yaratish ngOnInit dasturini ishga tushiradi; uni olib tashlash ngOnDestroy bilan ishlaydi.
• Tozalash: Intervalni tozalash vayron qilingandan keyin fon ishini oldini oladi.

import { bootstrapApplication } from '@angular/platform-browser';
    import { Component, OnInit, OnDestroy } from '@angular/core';
    import { CommonModule } from '@angular/common';
    {{ ... }}
export class App {
  text = '';
}

bootstrapApplication(App);

<app-root></app-root>

Misol tushuntirildi

• Ota-ona → Bola: kiritish oynasi ota-onada text yangilanadi; bola uni [text] orqali oladi.
• Yozuvni o‘zgartirish: Bola ko‘rsatish uchun SimpleChanges-dan oxirgi oldingi va kurs qiymatlarini saqlaydi.
• Edge case: undefined → value yoki value → '' kabi o‘tishlarni boshqaradi.

@ViewChild('box') box!: ElementRef<HTMLInputElement>;
ngAfterViewInit() { this.box.nativeElement.focus(); }

Misol tushuntirildi

• @Input() : Bola ota-onalar bog‘lashi mumkin bo‘lgan text kiritishni e’lon qiladi.
• ngOnChanges(changes) : Har bir o‘zgartirilgan kiritish uchun previousValue va currentValue bilan SimpleChanges oladi.
• O‘zgarmas yangilanishlar: O‘zgarishlarni aniqlashni ishga tushirish uchun mos yozuvlarni mutatsiyaga ko‘ra almashtirishni afzal ko‘ring.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { CommonModule } from '@angular/common';

{{ ... }}

bootstrapApplication(App);

<app-root></app-root>

Misol tushuntirildi

• Ko‘p murojaatlar: box kiritish va @ViewChild orqali panel konteynerini o‘qiydi.
• DOM ishini kechiktirish: ngAfterViewInit-da setTimeout-dan o‘lchashdan oldin ko‘rinishga ruxsat berish uchun foydalanadi.
• o‘lchov (): Chegaraviy maydonni o‘qiydi va o‘lcham stringini formatlaydi.

AfterViewInit va tozalash

Ko‘rinish ishga tushirilgandan so‘ng shablon referatlariga kirish va component yo‘q qilinganda resurslarni tozalash.

// Example teardown pattern
sub?.unsubscribe?.();
clearInterval(intervalId);
removeListener?.();

Misol tushuntirildi

• Olib tashlash: ngOnDestroy-da obunani bekor qiling, intervallarni tozalang va tinglovchilarni olib tashlang.
• Xavfsizlik: ixtiyoriy zanjirli (?.) tutqichlarning yetishmasligidan himoya qiladi.