دورة حياة المكون component lifecycle في angular

كل مكون في angular يملك دور حياة خاصة به والتي تسمى بالـ life cycle تتمثل هذه الدورة بجموعة من الأحداث تطرأ على المكون منذ لحظة تشغيله من طرف المستخدم الى غاية لحظة تركه .  هذه الأحداث تترجم في الكود على اساس انها مجموعة من الدوال  يتم وضعها بالمكونات حسب حاجتنا اليه ولكل دالة وظيفة معينة تقوم بتنفيذها  بمجرد بداية حدث معين

قد سبق و تطرقنا الى بالدروس السابقة الى دالة onInit هذه الدالة هي احد اقسام دورة حياة المكون ويتم تنفيذها بمجرد طلب المكون (اقلاعه)  فيقوم النظام باستدعاء دالة oninit وتنفيذ الكود الذي بداخلها .

أقسام دورة حياة المكون

ngOnChanges :وهي دالة يتم تنفيذها  أول مرة عند اقلاع المكون وأيضا تنفد بعد كل عملية تغيير للبيانات المدخلة (inputs) تطرأ على المكون الأب فيقوم النظام بتنفيذ كود هذه الدالة 

ملاحظة : دالة ngOnChanges هي أول دالة يتم تنفيذها في دورة lifecylce  طبعا تنفذ بعد constractor وقبل ngOnInit   وهي تعيد تنفيذ نفسها بعد اي تغير يحدث بالمكون الأب 

مثال

قم بإنشاء مكونين 

نكتب بتمبلايت المكون الاب parent.component.html

<my-component [name]="somePropInParent"></my-component> <!-- المكون يستقبل المتغير من المكون الاب-->

name هو متغير علوي يلتقطه المكون الابن (my-component) فيستقبل المتغير من الاب 

المكون الابن

@Component({
  selector: 'my-component'
})
// المكون الابن
class MyComponent {
// تعير المتغير الملتقط من المكون الاب
  @Input() name:string;  // if changes => call ngOnChanges()

  ngOnChanges(changes) {
      // في حالة تغيرت قيمة المتغير لسبب ما يقوم النظام باستدعاء هده الدالة
     //your code
  }

  ngOnInit() {
  }
}

ngOnInit هي دالة  يتم تنفيذها مباشرة  بعد استدعاء المكون

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

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

export class HomeComponent implements OnInit {
  constructor() { }
  ngOnInit() {
    console.log("component has been initialized!")
  }
}

-الدلة تنفذ مرة واحدة عند عملية تهيئة المكوّن (when a component is initialized.)

-الدالة يتم تنفيذها بعد  دالة  ngOnChanges 

-الدالة تنفذ بعدما يتم عرض الخصائص المرتبطة بالبيانات (inputs & data-bound)

ngOnInit() executes once when a component is initialized.

ngOnInit() executes after data-bound properties are displayed and input properties are set.

ngOnInit() executes once after the first ngOnChanges.

ngOnDestroy  دالة يتم تنفيذها مباشرة قبل عملية ترك المكون والخروج منه (تنفد قبل عملية تدمير المكون) عادة نستعملها من أجل عملية تدمير للمتغيرات وتدميرها للحفاظ على الذاكرة او عمل احداث معينة نريدها بعدما يخرج المستخدم من المكون . 

class MyComponent implements OnDestroy {
  ngOnDestroy() {
    // ...your code
  }
}

ngDoCheck :  تقوم بالكشف عن التغييرات التي لا تستطيع Angular اكتشافها بمفردها أو التصرف بناءً عليها. يتم الاتصال بالدالة أثناء كل عملية اكتشاف للتغيير، مباشرة بعد ngOnChanges  و ngOnInit.

مثال

let user = {
  isLoggedIn: true
}

النظام يستطيع استشعار تغير قيمة user ولكنه لا يستطيع تحديد ما إذا كانت قيمة user.isLoggedIn قد تغيرت 

لذلك في هذه الحالة سنحتاج الى دالة ngDoCheck  لتحديد حدث تغيير هذه القيم

مثال

@Component({
   selector: 'test-do-check',
   template: `
      <div [innerHtml]="obj.changer"></div>
   `, 
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class TestDoCheckComponent implements DoCheck, OnInit {

    public obj: any = {
       changer: 1
    };

    private _oldValue: number = 1;

    constructor(private _changeRef: ChangeDetectorRef){}

    ngOnInit() {
       setInterval(() => {
           this.obj.changer += 1;
       }, 1000);
    }

    ngDoCheck() {
        console.log('ngDoCheck called');
        if(this._oldValue !== this.obj.changer) {
           this._oldValue = this.obj.changer;
           //disable this line to see the counter not moving
           this._changeRef.detectChanges();
       }
    }

}

ngAfterContentInit : يتم استدعاء الدالة بعد عمل تهيئة للمحتوى الخارجي الخاص به (initialized) .يتم استدعاء هذه الدالة مرة واحدة بعد أول استدعاء للدالة ngDoCheck

ngAfterViewInit : يتم استدعاء الدالة بعد ان يتم تهيئة الـ view الخاص بالمكون والـ views الخاص المكون الابن

ngAfterContentChecked : يفضل استدعاء هذه الدالة في العمليات التي تستخدم api خارجي لانه تقوم . وظيفتها هي تنفيذ الكود مباشرة بعد التحقق من جلب المحتوى بالمكون .الدالة مفيدة إذا كنت تريد تنفيذ مهام تهيئة إضافية بعد أن يقوم Angular بتهيئة محتوى المكون  اي بمعنى اوضح => بعد تنفيذ دالة ngAfterContentInit  وبعد كل مرة يتم تنفيذ دالة  ngDoCheck

import { Component, OnInit,  DoCheck, AfterContentChecked } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `<a (click)="clickMe()">Click me</a>`,
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor() { }
  ngOnInit() {
    console.log("onInit called")
  }
  ngDoCheck(){
    console.log("do check")
  }
  ngAfterContentChecked(){
    console.log("after content checked")
  }
  clickMe(){
    console.log("link clicked")
  }
}