මොඩියුලය 9: Component Lifecycle & Change Detection

Angular විසින් component එකක ජීවන චක්‍රයේ විවිධ අවස්ථා වලදී අපට කේත ක්‍රියාත්මක කිරීමට ඉඩ සලසන "hooks" කිහිපයක් සපයයි. මේවා `OnInit`, `OnChanges` වැනි interface ලෙස implement කරනු ලැබේ.

ප්‍රධාන lifecycle hooks සහ ඒවා ක්‍රියාත්මක වන අනුපිළිවෙල:

• ngOnChanges: Component එකේ @Input() properties වලට දත්ත ලැබෙන විට හෝ ඒවා වෙනස් වන විට ක්‍රියාත්මක වේ. Component එක නිර්මාණය කිරීමට පෙර පවා මෙය ක්‍රියාත්මක විය හැක.
• ngOnInit: Component එක නිර්මාණය කර, එහි properties مقدار دهی කළ පසු, එක් වරක් පමණක් ක්‍රියාත්මක වේ. දත්ත ලබාගැනීම (data fetching) වැනි ආරම්භක කාර්යයන් සඳහා බහුලවම භාවිතා වේ.
• ngDoCheck: සෑම change detection චක්‍රයකදීම ක්‍රියාත්මක වේ. Angular හට හඳුනාගත නොහැකි වෙනස්කම් අතින් (manually) පරීක්ෂා කිරීමට අවශ්‍ය විට භාවිතා කරයි.
• ngAfterViewInit: Component එකේ view (template) සහ එහි child views مقدار دهی කළ පසු ක්‍රියාත්මක වේ.
• ngOnDestroy: Component එක DOM එකෙන් ඉවත් කිරීමට මොහොතකට පෙර ක්‍රියාත්මක වේ. Memory leaks වැළැක්වීමට (උදා: Observable subscriptions unsubscribing කිරීම) මෙය අත්‍යවශ්‍ය වේ.

import { Component, OnInit, OnChanges, OnDestroy, Input, SimpleChanges } from '@angular/core';

@Component({ ... })
export class LifecycleDemoComponent implements OnInit, OnChanges, OnDestroy {
  @Input() data: string;

  constructor() {
    console.log('1. Constructor called');
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('2. ngOnChanges called:', changes);
  }

  ngOnInit() {
    console.log('3. ngOnInit called');
    // Ideal place for initial data fetching
  }
  
  ngOnDestroy() {
    console.log('X. ngOnDestroy called');
    // Unsubscribe from observables here to prevent memory leaks
  }
}

Change Detection යනු Angular විසින් දත්තවල වෙනසක් (උදා: පරිශීලක event එකක්, API එකකින් දත්ත ලැබීම) හඳුනාගෙන, ඊට අදාළව application view (DOM) එක යාවත්කාලීන කරන යාන්ත්‍රණයයි.

Default Change Detection Strategy

පෙරනිමියෙන්, Angular "dirty checking" නම් ක්‍රමයක් භාවිතා කරයි. යම් වෙනසක් සිදු වූ විට (event, timer, HTTP request), Angular සම්පූර්ණ component ගස (component tree) ඉහළ සිට පහළට පරීක්ෂා කර, පෙර අගයන් සහ නව අගයන් සසඳා බලා, වෙනස්කම් ඇති තැන්වල DOM එක යාවත්කාලීන කරයි.

OnPush Change Detection Strategy

විශාල යෙදුම්වල කාර්ය සාධනය (performance) වැඩි දියුණු කිරීම සඳහා, අපට component එකක change detection strategy එක OnPush ලෙස වෙනස් කළ හැක.

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

@Component({
  selector: 'app-optimized',
  template: `...`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OptimizedComponent { ... }

OnPush භාවිතා කරන විට, component එකක් යාවත්කාලීන වන්නේ පහත අවස්ථා වලදී පමණි:

• එහි @Input() reference එක වෙනස් වූ විට.
• එම component එක තුළ හෝ එහි child component එකක event එකක් (උදා: click) සිදු වූ විට.
• Observable එකක් async pipe (| async) සමඟ භාවිතා කළ විට.
• අතින් (manually) change detection ක්‍රියාත්මක කළ විට.

මෙය අනවශ්‍ය පරීක්ෂා කිරීම් අඩු කරන නිසා යෙදුම වඩාත් වේගවත් වේ.