Angular 2
जीवनचक्र के हुक

टिप्पणियों

OnInit

जब घटक या निर्देशक गुणों को प्रारंभिक किया गया है, तो निकाल दिया गया।

(बच्चे के निर्देशों से पहले)

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

@Component({
    selector: 'so-oninit-component',
    templateUrl: 'oninit-component.html',
    styleUrls: ['oninit-component.']
})
class OnInitComponent implements OnInit {

    ngOnInit(): void {
        console.log('Component is ready !');
    }
}

OnDestroy

घटक या निर्देश आवृत्ति नष्ट होने पर निकाल दिया जाता है।

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

@Component({
    selector: 'so-ondestroy-component',
    templateUrl: 'ondestroy-component.html',
    styleUrls: ['ondestroy-component.']
})
class OnDestroyComponent implements OnDestroy {

    ngOnDestroy(): void {
        console.log('Component was destroyed !');
    }
}

OnChanges

एक या एक से अधिक घटक या निर्देश गुणों को बदलने पर निकाल दिया गया।

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

@Component({
    selector: 'so-onchanges-component',
    templateUrl: 'onchanges-component.html',
    styleUrls: ['onchanges-component.']
})
class OnChangesComponent implements OnChanges {
    @Input() name: string;
    message: string;
    
    ngOnChanges(changes: SimpleChanges): void {
        console.log(changes);
    }
}

बदलने पर ईवेंट लॉग हो जाएगा

name: {
    currentValue: 'new name value',
    previousValue: 'old name value'
},
message: {
    currentValue: 'new message value',
    previousValue: 'old message value'
}

AfterContentInit

घटक या निर्देश की सामग्री के आरंभ के बाद आग समाप्त हो गई है।

(OnInit के ठीक बाद)

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

@Component({
    selector: 'so-aftercontentinit-component',
    templateUrl: 'aftercontentinit-component.html',
    styleUrls: ['aftercontentinit-component.']
})
class AfterContentInitComponent implements AfterContentInit {

    ngAfterContentInit(): void {
        console.log('Component content have been loaded!');
    }
}

AfterContentChecked

दृश्य के बाद आग को पूरी तरह से शुरू कर दिया गया है।

(केवल घटकों के लिए उपलब्ध)

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

@Component({
    selector: 'so-aftercontentchecked-component',
    templateUrl: 'aftercontentchecked-component.html',
    styleUrls: ['aftercontentchecked-component.']
})
class AfterContentCheckedComponent implements AfterContentChecked {

    ngAfterContentChecked(): void {
        console.log('Component content have been checked!');
    }
}

AfterViewInit

दोनों घटक दृश्य और उसके किसी भी बच्चे के विचारों को शुरू करने के बाद आग। यह कोणीय 2 पारिस्थितिकी तंत्र के बाहर प्लगइन्स के लिए एक उपयोगी जीवन चक्र हुक है। उदाहरण के लिए, आप इस पद्धति का उपयोग कर सकते हैं कि एंगुलर 2 द्वारा प्रस्तुत मार्कअप के आधार पर एक jQuery दिनांक पिकर को आरम्भ किया जाए।

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

@Component({
    selector: 'so-afterviewinit-component',
    templateUrl: 'afterviewinit-component.html',
    styleUrls: ['afterviewinit-component.']
})
class AfterViewInitComponent implements AfterViewInit {

    ngAfterViewInit(): void {
        console.log('This event fire after the content init have been loaded!');
    }
}

AfterViewChecked

घटक की, दृश्य की जांच के बाद आग समाप्त हो गई है।

(केवल घटकों के लिए उपलब्ध)

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

@Component({
    selector: 'so-afterviewchecked-component',
    templateUrl: 'afterviewchecked-component.html',
    styleUrls: ['afterviewchecked-component.']
})
class AfterViewCheckedComponent implements AfterViewChecked {

    ngAfterViewChecked(): void {
        console.log('This event fire after the content have been checked!');
    }
}

DoCheck

केवल निर्दिष्ट गुणों पर परिवर्तनों के लिए सुनने की अनुमति देता है

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

@Component({
    selector: 'so-docheck-component',
    templateUrl: 'docheck-component.html',
    styleUrls: ['docheck-component.']
})
class DoCheckComponent implements DoCheck {
    @Input() elements: string[];
    differ: any;
    ngDoCheck(): void {
        // get value for elements property
        const changes = this.differ.diff(this.elements);
        
        if (changes) {
            changes.forEachAddedItem(res => console.log('Added', r.item));
            changes.forEachRemovedItem(r => console.log('Removed', r.item));
        }
    }
}