Angular Constructor() और ngOnInit() के बीच अंतर हिंदी में जानें | Hindi

Angular Constructor() और ngOnInit() के बीच अंतर हिंदी में जानें | Hindi

Angular | TypeScript को गहराई से सीखें।
Click here to read this article in English.

Constructor (कंस्ट्रक्टर)

  • Constructor डिफॉल्ट मेथड होती है किसी भी Class की, जो की execute होती है Class के इंस्टैंस या ऑब्जेक्ट बनाने पर।
  • Constructor किसी भी class की fields या class मेंम्बर्स के उचित इनिशियलाइज़ेशन को सुनिश्चित करता है।
  • Angular DI Constructor सारे parameters को analyze करता है।
    DI → Dependency Injector
  • जब हम new MyClass () कॉल करते हैं तो यह class का एक नया instance/object बना देता है।
  • नए MyClass () कॉल करते समय हमें parameter के type का विशेष रूप से ध्यान रखना चाहिए। new MyClass() काल करते वक़्त वही टाइप के पैरामीटर जाएँ जो क्लास के constructor में हैं,  उदाहरण : new MyClass(arg1:number, arg2:string, argN:any)

ngOnInit

  • ngOnInit एंगुलर का एक जीवन चक्र हुक है जो ये संकेत देता है कि एंगुलर ने component को सफलता पूर्वक बना दिया है। component तैयार है।
  • OnInit को उपयोग करने के लिए हमें इसे component क्लास में इस तरह से इम्पोर्ट करना होता है:
    import {Component, OnInit} from '@angular/core';
  • वास्तव में तो हर component क्लास में OnInit को इम्पोर्ट करना अनिवार्य नहीं है। लेकिन ऐसा करना अच्छा अभ्यास माना जाता है।
  • किसी भी component क्लास में OnInit को इम्प्लीमेंट करना होता है। इस तरह से इम्प्लीमेंट करें :
    export class AppComponent implements OnInit { }

ngOnInit को उपयोग करना सीखें।

// OnInit को इस तरह से इम्पोर्ट करें। 
import {Component, OnInit} from '@angular/core';
...

@Component({
	...
})
// OnInit को इस तरह से इम्प्लीमेंट करें।
export class AppComponent implements OnInit {
  
  constructor() {
     // ngOnInit() के कॉल होने से पहले constructor() कॉल होगा. 
  }

  ngOnInit() {
     // constructor के कॉल होने के बाद और ngOnChanges() के पहली बार कॉल होने के बाद ngOnInit() कॉल होगा।
  }
  
}

Angular काल करता है ngOnChanges() मेथड को जब भी वो किसी भी कॉम्पोनेन्ट class या डायरेक्टिव की input प्रॉपर्टीज की value में changes डिटेक्ट करता है.
ngOnChanges() के बारे में ज्यादा जानकारी के लिए यहाँ क्लिक करें 👆 Angular Project with Lifecycle Hooks.


ngOnInit() और constructor() के बीच अंतर

  • constructor() का ज्यादातर उपयोग initialization और declaration के लिए किया जाता है।
  • बेहतर होगा की हम constructor में एक्चुअल कोड ना ही लिखें।
  • constructor() का उपयोग class के members को इनिशियलाइज़ करने के लिए ही करें न की एक्चुअल कोड work के लिए।
  • तो हमें constructor() का उपयोग Dependency Injection और class मेंबर्स/fields को initialize करने के लिए ही करना चाहिए।
  • और ngOnInit() एक उचित जगह है आपके "actual work code" को लिखने के लिए. इसमें वो कोड लिखा जाता है जिसे class के instantiated होते ही execute करना होता है।
  • जैसे की डेटाबेस से डाटा को लोड करके लाना - आपके HTML टेम्पलेट व्यू में यूजर को दिखाने के लिए। इस तरह का कोड ngOnInit() में लिखा जाना चाहिए।

निष्कर्ष (Conclusion)

  • Constructor() क्लास के मेंबर्स/फ़ील्ड्स को इनिशियलाइज़ करता है।
  • ngOnInit() वो फंक्शन है जहाँ code लिखा जाता है जिसे हमें class के इनिशियलाइज़ होते ही एक्सेक्यूटे करना चाहते हो।

इसके बाद, मैंने एक नया लेख लिखा है।

इस लेख में आप ‘constructor’ और ‘ngOnInit’ के बीच अंतर को गहराई से जान पाएंगे।

अंतर को जानने के लिए यहाँ इस लिंक पर क्लिक करें।
Angular Project with Lifecycle Hooks.


पूर्ण हुआ 🤩 अंतर बहुत आसान था। बाद में मिलते हैं 👋👋


नीचे टिप्पणी बॉक्स में टिप्पणी करने के लिए स्वतंत्र महसूस करें... अगर मैंने कुछ भी छोड़ा हो या कुछ भी गलत है या कुछ भी आपके लिए काम नहीं कर रहा है :)
अधिक लेख के लिए जुड़े रहें।