1071

कोणीय ngOnInitडिफ़ॉल्ट रूप से जीवन चक्र हुक प्रदान करता है ।

ngOnInitहम पहले से ही एक है, तो क्यों इस्तेमाल किया जाना चाहिए constructor?

angular typescript ngoninit

— हसीना पीए
स्रोत

11

हे, मेरे जवाब की जाँच करें जो कि कोणीय के

— अधिकतम

2

लेख की

— मैक्स

1

@MaximKoretskyi, आपका लिंक मृत है।

— यश कपूर

1107

Constructorवर्ग है कि जब वर्ग instantiated और वर्ग और उसके उपवर्गों में क्षेत्रों के समुचित initialisation सुनिश्चित करता है निष्पादित किया जाता है की एक डिफ़ॉल्ट विधि है। कोणीय, या बेहतर डिपेंडेंसी इंजेक्टर (DI), कंस्ट्रक्टर मापदंडों का विश्लेषण करता है और जब यह कॉल करके एक नया उदाहरण बनाता है, तो यह new MyClass()उन प्रदाताओं को खोजने की कोशिश करता है जो कंस्ट्रक्टर मापदंडों के प्रकारों से मेल खाते हैं, उन्हें हल करता है और उन्हें कंस्ट्रक्टर के पास भेजता है जैसे

new MyClass(someArg);

ngOnInit एक जीवन चक्र हुक है, जो यह बताता है कि कोणीय को घटक बनाने के लिए कहा जाता है।

हमें OnInitइसका उपयोग करने के लिए इस तरह आयात करना होगा (वास्तव में कार्यान्वयन OnInitअनिवार्य नहीं है लेकिन अच्छा अभ्यास माना जाता है):

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

तब हमें विधि का उपयोग करने के लिए, हमें OnInitकक्षा को इस तरह लागू करना होगा:

export class App implements OnInit {
  constructor() {
     // Called first time before the ngOnInit()
  }

  ngOnInit() {
     // Called after the constructor and called  after the first ngOnChanges() 
  }
}

आपके निर्देश के डेटा-बाउंड गुणों को प्रारंभ करने के बाद कस्टम इनिशियलाइज़ेशन लॉजिक निष्पादित करने के लिए इस इंटरफ़ेस को लागू करें। ngOnInit को सही कहा जाता है क्योंकि निर्देश के डेटा-बद्ध गुणों को पहली बार चेक किया गया है, और इससे पहले कि इसके किसी भी बच्चे की जाँच की गई है। यह केवल एक बार जब निर्देश तत्काल किया जाता है, तो इसे लागू किया जाता है।

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

तो आपको constructor()सेटअप निर्भरता इंजेक्शन का उपयोग करना चाहिए और बहुत कुछ नहीं। ngOnInit () "शुरू" करने के लिए बेहतर जगह है - यह वह जगह है जहां / जब घटकों के बाइंडिंग हल होते हैं।

अधिक जानकारी के लिए यहां देखें:

— परदीप जैन
स्रोत

62

वास्तव में, अधिकांश (या यहां तक कि सभी) वर्ग आधारित भाषाओं में विशेष रूप से अन्य वर्गों का विस्तार करने वाले वर्गों के लिए उचित आरंभीकरण आदेश सुनिश्चित करने के लिए संदूक होते हैं, जहां कुछ कठिन मुद्दे सामने आ सकते हैं, जैसे अंतिम फ़ील्ड (टीएस उनके पास नहीं है) और इसी तरह। अवरोधक Angular2 से संबंधित नहीं हैं, वे एक टाइपस्क्रिप्ट सुविधा है। कुछ इनिशियलाइज़ेशन होने के बाद या कुछ घटनाओं पर घटक कार्य की अनुमति देने और उचित समय पर कुछ कार्यों को करने का मौका देने के लिए जब कोई घटना होती है, तो जीवनचक्र के हुक को कोणीय द्वारा बुलाया जाता है।

— गुंटर ज़ोचाउर

12

Angular.io/docs/ts/latest/guide/server-communication.html में एक ब्लॉक उद्धरण है, जो यह भी बताता है: "घटक अपने निर्माता के सरल होने पर परीक्षण और डिबग करना आसान होते हैं, और सभी वास्तविक कार्य (विशेष रूप से कॉलिंग) रिमोट सर्वर) एक अलग विधि में संभाला जाता है। " - इस मामले में वह विधि ngOnInit () है

— yoonjesung

3

एक जीवन चक्र हुक है जिसे Angular2 द्वारा संकेत दिया जाता है कि यह इंगित करने के लिए कि कोणीय घटक बनाया गया है। - बिलकुल ऐसा नहीं है। यह संकेत देता है कि यह बाइंडिंग को इनिशियलाइज़ करता है। घटक पहले बनाया गया है। मेरा उत्तर

— मैक्स कोरेत्सकी

22

जैसा कि सभी "सर्वोत्तम प्रथाओं" के साथ, मुझे लगता है कि यह भी एक अच्छा विचार होगा कि आप यह भी बताएं कि आपको कंस्ट्रक्टर में "काम" क्यों नहीं करना चाहिए। एंगुलर टीम लीड का यह लेख सघन है, लेकिन इसमें मदद मिल सकती है: misko.hevery.com/code-reviewers-guide/… इसके अलावा, OnInit को लागू करने के लिए आवश्यक विसंगतियों पर कम महत्व दिया जाना चाहिए (यह खोजना आसान है) और अधिक महत्वपूर्ण तथ्य यह है कि डेटा-बाइंडिंग कंस्ट्रक्टर में उपलब्ध नहीं हैं।

— Reikim

2

यदि tsconfig.jsonफ़ाइल की तरह सख्त मोड सही है "strict": true, तो आपको क्लास के सदस्यों को इनिशियलाइज़ करना होगा constructor, ngOnitजैसे नहीं FormGroup।

— रोहित शर्मा

169

लेख अंगुलर में कंस्ट्रक्टर और ngOnInit के बीच आवश्यक अंतर कई दृष्टिकोणों से अंतर की खोज करता है। यह उत्तर घटक आरंभीकरण प्रक्रिया से संबंधित सबसे महत्वपूर्ण अंतर स्पष्टीकरण प्रदान करता है जो उपयोग में भिन्न को भी दर्शाता है।

कोणीय बूटस्ट्रैप प्रक्रिया में दो प्रमुख चरण होते हैं:

निर्माण घटक पेड़
परिवर्तन का पता लगाना

घटक के निर्माता को तब कहा जाता है जब कोणीय घटक पेड़ का निर्माण करता है। सभी जीवनचक्र के हुक को परिवर्तन परिवर्तन का पता लगाने के भाग के रूप में कहा जाता है।

जब कोणीय घटक का निर्माण करता है तो रूट मॉड्यूल इंजेक्टर पहले से ही कॉन्फ़िगर किया जाता है ताकि आप किसी भी वैश्विक निर्भरता को इंजेक्ट कर सकें। इसके अलावा, जब कोणीय एक चाइल्ड कंपोनेंट क्लास को पेरेंट कंपोनेंट के लिए इंजेक्टर लगाता है, तो वह पहले से ही सेट हो जाता है, ताकि आप पेरेंट कंपोनेंट सहित डिफरेंट कंपोनेंट को पेरेंट कंपोनेंट सहित इंजेक्ट कर सकें। कंपोनेंट कंस्ट्रक्टर एकमात्र तरीका है जिसे इंजेक्टर के संदर्भ में कहा जाता है, इसलिए यदि आपको किसी भी निर्भरता की आवश्यकता है तो उन निर्भरता को प्राप्त करने का एकमात्र स्थान है।

जब कोणीय परिवर्तन शुरू होता है तो घटकों का पता लगाया जाता है कि पेड़ का निर्माण किया गया है और पेड़ में सभी घटकों के लिए निर्माणकर्ताओं को बुलाया गया है। साथ ही हर कंपोनेंट के टेम्पलेट नोड्स DOM में जोड़े जाते हैं। @Inputसंचार तंत्र परिवर्तन का पता लगाने के दौरान संसाधित किया जाता है ताकि आप गुण निर्माता में उपलब्ध करने की उम्मीद नहीं कर सकते। यह बाद में उपलब्ध होगा ngOnInit।

आइए एक त्वरित उदाहरण देखें। मान लें कि आपके पास निम्नलिखित टेम्पलेट हैं:

<my-app>
   <child-comp [i]='prop'>

तो कोणीय अनुप्रयोग शुरू कर देता है। जैसा कि मैंने कहा कि यह पहले प्रत्येक घटक के लिए कक्षाएं बनाता है। इसलिए इसे MyAppComponentकंस्ट्रक्टर कहते हैं । यह एक DOM नोड भी बनाता है जो my-appघटक का होस्ट तत्व है । फिर यह कंस्ट्रक्टर को child-compकॉल करने और कॉल करने के लिए एक होस्ट तत्व बनाने के लिए आगे बढ़ता है ChildComponent। इस स्तर पर यह वास्तव में iइनपुट बाइंडिंग और किसी भी जीवन चक्र हुक के साथ संबंध नहीं है । तो जब यह प्रक्रिया पूरी हो जाती है तो कोणीय निम्नलिखित घटक विचारों के पेड़ के साथ समाप्त होता है:

MyAppView
  - MyApp component instance
  - my-app host element data
       ChildCompnentView
         - ChildComponent component instance
         - child-comp host element data

तभी परिवर्तन का पता लगाता है और MyAppComponent वर्ग के लिए my-appकॉल और बाइंडिंग अपडेट करता है ngOnInit। फिर यह चाइल्डकम्पोनेंट क्लास पर child-compकॉल और कॉल के लिए बाइंडिंग अपडेट करने के लिए आगे बढ़ता है ngOnInit।

आप अपने आरंभीकरण तर्क को या तो निर्माणकर्ता में कर सकते हैं या ngOnInitआपको जो उपलब्ध हो उसके आधार पर। उदाहरण के लिए लेख यहाँ है कि कैसे ViewContainerRef प्राप्त करने से पहले @ViewChild क्वेरी का मूल्यांकन किया जाता है कि पता चलता है कि किस प्रकार के आरंभीकरण तर्क को कंस्ट्रक्टर में प्रदर्शन करने की आवश्यकता हो सकती है।

यहाँ कुछ लेख हैं जो आपको विषय को बेहतर ढंग से समझने में मदद करेंगे:

— मैक्स कोरेत्स्की
स्रोत

33

यह स्वीकृत उत्तर होना चाहिए। यह वास्तव में मंत्र और मंत्र को दोहराने के बजाय WHY की व्याख्या करता है the constructor should only be used to inject dependencies।

— Stavm

1

@ yannick1976, धन्यवाद! संदर्भित लेखों को देखें

— मैक्स कोरसेटस्की

@flobacca, क्या आप इस प्रश्न को फिर से पढ़ सकते हैं, यह समझना मुश्किल है कि आप क्या पूछ रहे हैं

— मैक्स कोरेत्स्की

कृपया मुझे सुधारें अगर मैं गलत हूं। मैंने समझा कि घटक वृक्ष का निर्माण पहले किया जाता है और फिर पता लगाने की प्रक्रिया को बदल दिया जाता है। आपने लिखा है पहले AppComponent कंस्ट्रक्टर को (हल की गई निर्भरता के साथ) कहा जाता है, फिर चाइल्डकंपोनेंट कंस्ट्रक्टर को (निर्भरता के साथ) कहा जाता है, फिर AppComponent के लिए इनपुट बाइंडिंग और उसके बाद OnInit कहा जाता है। लेकिन मेरी चिंता यह है कि अगर मैं दोनों चक्रों में जीवन चक्र हुक जोड़ देता हूं तो प्रवाह है AppComponentConstructor - -> AppComponentOnInit - → ChildComponentConstructor - → ChildComponentOnInit क्यों AppComponentOnInit को ChildComponentConstructor से पहले बुलाया जा रहा है

— user2485435

1

@MaxKoretskyiakaWizard आप सही थे। मैंने अपने एप्लिकेशन सेटअप में कुछ गलती की है। यह आपके द्वारा बताए अनुसार काम कर रहा है। कोणीय-c7zjsx.stackblitz.io

— user2485435

93

मुझे लगता है कि सबसे अच्छा उदाहरण सेवाओं का उपयोग करना होगा। मान लीजिए कि जब मेरा घटक 'सक्रिय' हो जाता है तो मैं अपने सर्वर से डेटा हड़पना चाहता हूं। मान लीजिए कि मैं सर्वर से प्राप्त करने के बाद डेटा के लिए कुछ अतिरिक्त चीजें करना चाहता हूं, हो सकता है कि मुझे कोई त्रुटि मिले और मैं इसे अलग तरीके से लॉग इन करना चाहता हूं।

यह वास्तव में ngOnInit के साथ आसान है एक निर्माता पर, यह भी सीमित करता है कि मुझे अपने आवेदन में कितनी कॉलबैक परतें जोड़ने की आवश्यकता है।

उदाहरण के लिए:

export class Users implements OnInit{

    user_list: Array<any>;

    constructor(private _userService: UserService){
    };

    ngOnInit(){
        this.getUsers();
    };

    getUsers(){
        this._userService.getUsersFromService().subscribe(users =>  this.user_list = users);
    };


}

अपने कंस्ट्रक्टर के साथ मैं बस अपने _userService को कॉल कर सकता हूं और अपने user_list को पॉप्युलेट कर सकता हूं, लेकिन शायद मैं इसके लिए कुछ अतिरिक्त चीजें करना चाहता हूं। यह सुनिश्चित करने के लिए कि सब कुछ ऊपरी_केस है, मुझे पूरी तरह से यकीन नहीं है कि मेरा डेटा कैसे हो रहा है।

इसलिए यह ngOnInit का उपयोग करना बहुत आसान बनाता है।

export class Users implements OnInit{

    user_list: Array<any>;

    constructor(private _userService: UserService){
    };

    ngOnInit(){
        this.getUsers();
    };

    getUsers(){
        this._userService.getUsersFromService().subscribe(users =>  this.user_list = users);
        this.user_list.toUpperCase();
    };


}

यह देखने में बहुत आसान बनाता है, और इसलिए मैं अपने घटक के भीतर अपने फ़ंक्शन को कॉल करता हूं, जब मैं इसके लिए खुदाई करने के बजाय कहीं और खुदाई करता हूं। वास्तव में यह सिर्फ एक और उपकरण है जिसे आप भविष्य में पढ़ने और उपयोग करने में आसान बनाने के लिए उपयोग कर सकते हैं। इसके अलावा, मुझे एक कंस्ट्रक्टर के भीतर फ़ंक्शन कॉल करने के लिए वास्तव में बुरा अभ्यास लगता है!

— मॉर्गन जी
स्रोत

यदि आप अभी अवलोकनकर्ता के लिए user_list सेट करते हैं तो आपका उदाहरण सरल किया जा सकता है। Angular2 में Async पाइप है, इसलिए वहाँ कोई समस्या नहीं होगी।

— DarkNeuron

@ मॉर्गन, मेरे लिए बस एक छोटी सी बात यहाँ जानने के लिए, आप पहले एक फंक्शन क्यों बनाते हैं getUsersऔर फिर उसमें डालते हैं ngOnInit? क्या यह सिर्फ ngOnInit में लिखना कम कोड नहीं है? मैं सोच रहा हूँ कि लोग इस तरह से क्यों करते हैं? क्या ऐसा है कि यदि आप चाहते हैं तो भी आप कोड का फिर से उपयोग कर सकते हैं? धन्यवाद।

— अल्फा ब्रावो

31

जैसा कि नीचे दिए गए उत्तर में देखा गया है कि अगर यह निर्माणकर्ता में है तो इससे कोई अंतर नहीं पड़ता है। यह उद्देश्य के लिए एक वास्तविक जवाब नहीं है।

— जिमी केन

8

मैं यह नहीं देखता कि यह सवाल का जवाब कैसे देता है। आप सिर्फ कोड क्यों नहीं डाल सकते हैं constructor?

— कोडिबुस्टीन

1

@ मॉर्गन आप सिर्फ क्यों नहीं कर सकतेconstructor(private _userService: UserService){ this.getUsers(); };

— एशले

82

ठीक है, सब से पहले ngOnInitका हिस्सा है कोणीय जीवन चक्र है, जबकि constructorका हिस्सा है ES6 , जावास्क्रिप्ट वर्ग इतना बड़ा अंतर यहीं से शुरू होता है! ...

मेरे द्वारा बनाए गए चार्ट के नीचे देखें जो कि कोणीय के जीवनचक्र को दर्शाता है।

Angular2 + में हम अपने लिए constructorकरने के लिए उपयोग करते DI(Dependency Injection)हैं, जबकि Angular 1 में यह स्ट्रिंग पद्धति को कॉल करने और जाँच करने के माध्यम से हो रहा था कि कौन सी निर्भरता इंजेक्ट की गई थी।

जैसा कि आप ऊपर दिए गए आरेख में देखते हैं, ngOnInitकंस्ट्रक्टर तैयार होने के बाद हो रहा है और ngOnChnagesघटक हमारे लिए तैयार होने के बाद निकाल दिया जाता है। इस चरण में सभी प्रारंभिककरण हो सकते हैं, एक साधारण नमूना एक सेवा को इंजेक्ट कर रहा है और इसे init पर आरंभ करता है।

ठीक है, मैं भी आप, देखने के लिए देखें कि हम का उपयोग मिलता है एक नमूना कोड का हिस्सा ngOnInitऔर constructorनीचे दिए गए कोड में:

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


@Component({
 selector: 'my-app',
 template: `<h1>App is running!</h1>
  <my-app-main [data]=data></<my-app-main>`,
  styles: ['h1 { font-weight: normal; }']
})
class ExampleComponent implements OnInit {
  constructor(private router: Router) {} //Dependency injection in the constructor

  // ngOnInit, get called after Component initialised! 
  ngOnInit() {
    console.log('Component initialised!');
  }
}

— एलिरेज़ा
स्रोत

1

धन्यवाद। यह सबसे अच्छा जवाब होना चाहिए।

— डॉन दिलंगा

58

पहला एक (कंस्ट्रक्टर) वर्ग तात्कालिकता से संबंधित है और इसका एंगुलर 2 से कोई लेना-देना नहीं है। मेरा मतलब है कि किसी भी वर्ग पर एक निर्माणकर्ता का उपयोग किया जा सकता है। आप इसमें नए बनाए गए इंस्टेंस के लिए कुछ इनिशियलाइज़ेशन प्रोसेसिंग लगा सकते हैं।

दूसरा एक कोणीय 2 घटकों के एक जीवन चक्र हुक से मेल खाता है:

आधिकारिक कोणीय वेबसाइट से उद्धृत:

ngOnChanges कहा जाता है जब एक इनपुट या आउटपुट बाइंडिंग मान बदलता है

ngOnInit पहले के बाद कहा जाता है ngOnChanges

तो आपको उपयोग करना चाहिए ngOnInitयदि इनिशियलाइज़ेशन प्रोसेसिंग कंपोनेंट की बाइंडिंग पर निर्भर करता है (उदाहरण के लिए कंपोनेंट कंपोनेंट के साथ परिभाषित @Input), अन्यथा कंस्ट्रक्टर पर्याप्त होगा ...

— थियरी टेम्पलियर
स्रोत

49

मैं सिर्फ एक महत्वपूर्ण बात यह है कि इसके बाद के संस्करण स्पष्टीकरण में छोड़ दिया और बताते हैं कि जब आप था जोड़ देगा चाहिए का उपयोग ngOnInit।

यदि आप घटक के DOM जैसे ViewChildren , ContentChildren या ElementRef के माध्यम से कोई हेरफेर कर रहे हैं , तो आपके मूल तत्व कंस्ट्रक्टर चरण के दौरान उपलब्ध नहीं होंगे।

हालांकि, चूंकि ngOnInitएक बार घटक बन गया है और चेक ( ngOnChanges) को बुलाया गया है इसलिए आप इस बिंदु पर DOM तक पहुंच सकते हैं।

export class App implements OnInit, AfterViewInit, AfterContentInit {
  @Input() myInput: string;
  @ViewChild() myTemplate: TemplateRef<any>;
  @ContentChild(ChildComponent) myComponent: ChildComponent; 

  constructor(private elementRef: ElementRef) {
     // this.elementRef.nativeElement is undefined here
     // this.myInput is undefined here
     // this.myTemplate is undefined here
     // this.myComponent is undefine here
  }

  ngOnInit() {
     // this.elementRef.nativeElement can be used from here on
     // value of this.myInput is passed from parent scope
     // this.myTemplate and this.myComponent are still undefined
  }
  ngAfterContentInit() {
     // this.myComponent now gets projected in and can be accessed
     // this.myTemplate is still undefined
  }

  ngAfterViewInit() {
     // this.myTemplate can be used now as well
  }
}

— मिरोस्लाव जोनास
स्रोत

3

नहीं। के लिए @ViewChildrenविशेष रूप से, आप का उपयोग करने की आवश्यकता है ngAfterViewInitविधि। यहां देखें: stackoverflow.com/questions/46314734/…

— AsGoodAsItGets

1

धन्यवाद, @AsGoodAsItGates इसे इंगित करने के लिए। मैंने अब जवाब में सुधार किया है

— मिरोस्लाव जोनास

38

लघु और सरल उत्तर होगा,

Constructor: constructorएक default methodरन ( बधिरता द्वारा ) जब घटक का निर्माण किया जा रहा है। जब आप an instanceएक क्लास बनाते हैं तो उस समय को भी constructor(default method)बुलाया जाएगा। इसलिए दूसरे शब्दों में, जब घटक constructed or/and an instance is created constructor(default method)को बुलाया जा रहा है और प्रासंगिक कोड को लिखा जाता है। मूल रूप से और आम तौर पर Angular2इसमें चीजों को इंजेक्ट किया जाता था जैसे servicesकि आगे के उपयोग के लिए घटक का निर्माण किया जा रहा है।

OnInit: ngOnInit घटक का जीवन चक्र हुक है जो constructor(default method)घटक शुरू होने के बाद पहले चलता है।

तो, आपके कंस्ट्रक्टर को पहले बुलाया जाएगा और ऑनिनिट को कंस्ट्रक्टर विधि के बाद कहा जाएगा।

boot.ts

import {Cmomponent, OnInit} from 'angular2/core';
import {ExternalService} from '../externalService';

export class app implements OnInit{
   constructor(myService:ExternalService)
   {
           this.myService=myService;
   }

   ngOnInit(){
     // this.myService.someMethod() 
   }
}

संसाधन: जीवन चक्र हुक

आप इस छोटे डेमो की जांच कर सकते हैं जो दोनों चीजों के कार्यान्वयन को दर्शाता है।

— micronyks
स्रोत

5

मुझे लगता है कि "कंस्ट्रक्टर एक ऐसी चीज है जो घटक शुरू होने पर चलती है या कहलाती है।" भ्रामक है। कंस्ट्रक्टर घटक की नहीं वर्ग की एक विशेषता है। मैं कहता हूं कि कक्षा का उदाहरण केवल एक घटक बन जाता है जब निर्माता को बुलाया गया था और कोणीय ने इसे आरंभीकरण किया था।

— गुंटर ज़ोचबॉउर

हाँ, अब आप जाँच कर सकते हैं कि बयान बदल दिया है।

— माइक्रोनिक्क्स

1

हम्म, IMHO यह अभी भी वही है "कंस्ट्रक्टर (डिफ़ॉल्ट विधि) एक ऐसी चीज है जो घटक के निर्माण के समय चलती है या कहलाती है।" यह न केवल तब कहा जाता है जब एक घटक का निर्माण किया जाता है, बल्कि सेवाओं के लिए भी या जब कोड new MyClass()को निष्पादित किया जाता है। मुझे लगता है कि यह कहना भ्रामक है कि निर्माता घटकों के बारे में हैं, वे कक्षाओं के बारे में हैं और इन वर्गों के प्रारंभिक उदाहरण हैं। एक घटक सिर्फ ऐसे वर्ग के रूप में होता है। अन्यथा मुझे लगता है कि यह एक अच्छा जवाब है।

— गुंटर ज़ोचबॉउर

2

हाँ बिल्कुल। यह उल्लेख करना भूल गए कि जब आप किसी वर्ग की वस्तु बनाते हैं तो उस समय constructorको भी कहा जाएगा। लेकिन यह उत्तर कोणीय 2 संदर्भ में लिखा गया है। सबसे अच्छा उत्तर जानने के लिए आपको OOPs की मूल बातें जानना चाहिए। फिर भी मैं जवाब अपडेट करूंगा।

— माइक्रोनिक्क्स

@ गुंटरेज़ोचबॉयर, मुझे नहीं लगता कि यह एक सही दावा है कि यह घटक की नहीं बल्कि वर्ग की एक विशेषता है । प्रोग्रामिंग लैंग्वेज के नजरिए से हां, यह सही है। लेकिन मैं किसी भी जीवन चक्र के हुक के बिना घटकों के साथ सफलतापूर्वक काम कर सकता हूं। लेकिन मुझे एक निर्माता के बिना एक घटक के साथ काम नहीं कर सकता है अगर मुझे DI की आवश्यकता है क्योंकि यह एकमात्र इंजेक्शन स्थान है। मेरा जवाब

— मैक्स कोरसेटस्की

20

बहुत सी अन्य भाषाओं की तरह, आप वर्ग स्तर, कंस्ट्रक्टर या एक विधि पर चर को इनिशियलाइज़ कर सकते हैं। यह डेवलपर को तय करना है कि उनके विशेष मामले में सबसे अच्छा क्या है। लेकिन जब निर्णय लेने की बात आती है तो नीचे सर्वोत्तम प्रथाओं की सूची दी गई है।

कक्षा स्तर के चर

आमतौर पर, आप अपने सभी चरों को यहां घोषित करेंगे जो कि आपके बाकी घटक में उपयोग किया जाएगा। यदि आप मूल्य किसी और चीज़ पर निर्भर नहीं करते हैं, या स्थिरांक का उपयोग नहीं करते हैं तो स्थिरांक बनाने के लिए आप उन्हें इनिशियलाइज़ कर सकते हैं।

export class TestClass{
    let varA: string = "hello";
}

निर्माता

आम तौर पर यह सबसे अच्छा अभ्यास है कि कंस्ट्रक्टर में कुछ भी न करें और इसे केवल उन वर्गों के लिए उपयोग करें जिन्हें इंजेक्शन लगाया जाएगा। अधिकांश समय आपके निर्माता को इस तरह दिखना चाहिए:

   constructor(private http: Http, private customService: CustomService) {}

यह स्वचालित रूप से कक्षा स्तर के चर बनाएगा, इसलिए आपको customService.myMethod()इसे मैन्युअल रूप से करने के बिना पहुंच होगी ।

NgOnInit

NgOnit कोणीय 2 फ्रेमवर्क द्वारा प्रदान किया गया एक जीवन चक्र हुक है। OnInitइसका उपयोग करने के लिए आपके घटक को लागू करना चाहिए । यह जीवनचक्र हुक को कंस्ट्रक्टर कहे जाने के बाद कहा जाता है और सभी चर आरंभ किए जाते हैं। आपकी इनिशियलाइज़ेशन का बड़ा हिस्सा यहां जाना चाहिए। आपके पास निश्चितता होगी कि कोणीय ने आपके घटक को सही ढंग से आरंभीकृत किया है और आप OnInitअपने घटक को ठीक से लोड नहीं होने पर किसी भी तर्क को उन चीजों में करना शुरू कर सकते हैं जो आपको बनाम काम करने की आवश्यकता है।

यहाँ एक छवि है जो कहा जाता है के क्रम का विवरण:

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

TLDR

यदि आप कोणीय 2 ढांचे का उपयोग कर रहे हैं और कुछ जीवन चक्र की घटनाओं के साथ बातचीत करने की आवश्यकता है, तो समस्याओं से बचने के लिए इसके लिए फ्रेमवर्क द्वारा प्रदान किए गए तरीकों का उपयोग करें।

— एडुआर्डो डेनिस
स्रोत

19

इसका परीक्षण करने के लिए, मैंने इस कोड को लिखा, नेटिवस्क्रिप्ट ट्यूटोरियल से उधार :

user.ts

export class User {
    email: string;
    password: string;
    lastLogin: Date;

    constructor(msg:string) {        
        this.email = "";
        this.password = "";
        this.lastLogin = new Date();
        console.log("*** User class constructor " + msg + " ***");
    }

    Login() {
    }
}

login.component.ts

import {Component} from "@angular/core";
import {User} from "./../../shared/user/user"

@Component({
  selector: "login-component",
  templateUrl: "pages/login/login.html",
  styleUrls: ["pages/login/login-common.css", "pages/login/login.css"]
})
export class LoginComponent {

  user: User = new User("property");  // ONE
  isLoggingIn:boolean;

  constructor() {    
    this.user = new User("constructor");   // TWO
    console.log("*** Login Component Constructor ***");
  }

  ngOnInit() {
    this.user = new User("ngOnInit");   // THREE
    this.user.Login();
    this.isLoggingIn = true;
    console.log("*** Login Component ngOnInit ***");
  }

  submit() {
    alert("You’re using: " + this.user.email + " " + this.user.lastLogin);
  }

  toggleDisplay() {
    this.isLoggingIn = !this.isLoggingIn;
  }

}

कंसोल आउटपुट

JS: *** User class constructor property ***  
JS: *** User class constructor constructor ***  
JS: *** Login Component Constructor ***  
JS: *** User class constructor ngOnInit ***  
JS: *** Login Component ngOnInit ***

— abbaf33f
स्रोत

18

निर्माता के बीच मुख्य अंतर और ngOnInitवह यह है कि ngOnInitहै जीवन चक्र हुक और निर्माता के बाद चलता है। घटक ने प्रक्षेपित टेम्पलेट और इनपुट प्रारंभिक मूल्यों को कंस्ट्रक्टर में उपलब्ध नहीं किया है, लेकिन वे इसमें उपलब्ध हैं ngOnInit।

व्यावहारिक अंतर यह है कि ngOnInitकोड को कैसे संरचित किया जाता है। अधिकांश आरंभीकरण कोड को स्थानांतरित किया जा सकता है ngOnInit- जब तक कि यह दौड़ की स्थिति पैदा नहीं करता है ।

कंस्ट्रक्टर एंटीपैटर्न

आरंभीकरण कोड की एक पर्याप्त मात्रा कंस्ट्रक्टर विधि को विस्तारित करने, पढ़ने और परीक्षण करने के लिए कठिन बनाती है।

प्रारंभिक तर्क को क्लास कंस्ट्रक्टर से अलग करने के लिए एक सामान्य नुस्खा इसे दूसरी विधि में स्थानांतरित करना है init:

class Some {
  constructor() {
    this.init();
  }

  init() {...}
}

ngOnInit घटकों और निर्देशों में इस उद्देश्य की सेवा कर सकते हैं:

constructor(
  public foo: Foo,
  /* verbose list of dependencies */
) {
  // time-sensitive initialization code
  this.bar = foo.getBar();
}

ngOnInit() {
  // rest of initialization code
}

निर्भरता अन्तःक्षेपण

कोणीय में कक्षा के निर्माणकर्ताओं की प्राथमिक भूमिका निर्भरता इंजेक्शन है। टाइपस्क्रिप्ट में DI एनोटेशन के लिए कंस्ट्रक्टर्स का भी उपयोग किया जाता है। लगभग सभी निर्भरताएँ वर्ग उदाहरण के गुणों के रूप में दी गई हैं।

औसत घटक / निर्देशात्मक निर्माणकर्ता पहले से ही काफी बड़ा है क्योंकि इसमें निर्भरता के कारण बहु-हस्ताक्षर हो सकते हैं, निर्माणकर्ता के शरीर में अनावश्यक रूप से गहनता संबंधी तर्क डालना एंटीपैटर्न में योगदान देता है।

अतुल्यकालिक आरंभीकरण

एसिंक्रोनस इनिशियलाइज़ेशन कंस्ट्रक्टर को अक्सर एंटीपैटर्न माना जा सकता है और इसमें गंध होती है क्योंकि एसिंक्रोनस रूटीन को करने से पहले क्लास का इंस्टेंटेशन खत्म हो जाता है और इससे रेस की स्थिति बन सकती है। यदि ऐसा नहीं है, ngOnInitऔर अन्य जीवन चक्र हुक इसके लिए बेहतर स्थान हैं, खासकर क्योंकि वे asyncसिंटैक्स से लाभ उठा सकते हैं :

constructor(
  public foo: Foo,
  public errorHandler: ErrorHandler
) {}

async ngOnInit() {
  try {
    await this.foo.getBar();
    await this.foo.getBazThatDependsOnBar();
  } catch (err) {
    this.errorHandler.handleError(err);
  }
}

अगर दौड़ की स्थितियां हैं (एक घटक जिसमें इनिशियलाइज़ेशन एरर दिखाई नहीं देनी चाहिए), एसिंक्रोनस इनिशियलाइज़ेशन रुटीन को घटक तात्कालिकता से पहले होना चाहिए और मूल घटक, राउटर गार्ड, आदि में ले जाना चाहिए।

इकाई का परीक्षण

ngOnInitएक निर्माता की तुलना में अधिक लचीला है और यूनिट परीक्षण के लिए कुछ लाभ प्रदान करता है जिन्हें इस उत्तर में विस्तार से बताया गया है ।

यह ध्यान में रखते हुए कि ngOnInitइकाई परीक्षणों में घटक संकलन पर स्वचालित रूप से कॉल नहीं किया जाता है, ऐसे तरीकों को कहा जाता है जो ngOnInitघटक तात्कालिकता के बाद जासूसी या मजाक उड़ा सकते हैं।

असाधारण मामलों में ngOnInitअन्य घटक इकाइयों (उदाहरण के लिए, कुछ टेम्पलेट लॉजिक) के लिए अलगाव प्रदान करने के लिए पूरी तरह से ठूंसा जा सकता है।

विरासत

बाल कक्षाएं केवल निर्माणकर्ताओं को बढ़ा सकती हैं, उन्हें प्रतिस्थापित नहीं कर सकती हैं।

चूँकि thisइसे पहले संदर्भित नहीं किया जा सकता है super(), इसलिए यह इनिशियलाइज़ेशन पूर्वता पर प्रतिबंध लगाता है।

ngOnInitसमय-असंवेदनशील आरंभीकरण तर्क के लिए कोणीय घटक या निर्देश का उपयोग करने पर विचार करते हुए , बाल वर्गों को चुना जा सकता है कि क्या super.ngOnInit()कहा जाता है और कब:

ngOnInit() {
  this.someMethod();
  super.ngOnInit();
}

अकेले निर्माता के साथ इसे लागू करना असंभव होगा।

— एस्टस फ्लास्क
स्रोत

12

उपरोक्त उत्तर वास्तव में मूल प्रश्न के इस पहलू का उत्तर नहीं देते हैं: जीवनचक्र हुक क्या है? मुझे यह समझने में थोड़ा समय लगा कि इसका क्या मतलब है जब तक मैंने इस तरह से नहीं सोचा था।

1) कहें कि आपका घटक मानव है। मनुष्य के पास जीवन है जिसमें जीवन के कई चरण शामिल हैं, और फिर हम समाप्त हो जाते हैं।

2) हमारे मानव घटक में निम्नलिखित जीवनचक्र लिपि हो सकती है: जन्म, बच्चा, ग्रेड स्कूल, युवा वयस्क, मध्यम आयु के वयस्क, वरिष्ठ वयस्क, मृत, का विस्थापित।

3) कहें कि आप बच्चे पैदा करने के लिए एक फंक्शन चाहते हैं। इसे जटिल होने से रोकने के लिए, बल्कि हास्यप्रद होने के लिए, आप चाहते हैं कि आपका कार्य केवल मानव घटक जीवन के युवा वयस्क चरण के दौरान ही बुलाया जाए। तो आप एक घटक विकसित करें जो केवल तभी सक्रिय हो जब मूल घटक यंग एडल्ट स्टेज में हो। हुक आपको जीवन के उस चरण को इंगित करने और अपने घटक को उस पर कार्य करने में मदद करते हैं।

मजेदार चीजें। यदि आप अपनी कल्पना को वास्तव में कुछ इस तरह से कोडिंग करने देते हैं तो यह जटिल और मज़ेदार हो जाता है।

— प्रेस्टन
स्रोत

7

निर्माता जावास्क्रिप्ट में एक विधि है और .जब वर्ग instantiated है इसे तुरंत निर्माता चलाता है कि क्या यह कोणीय ढांचे में प्रयोग किया जाता है या not.So यह JavaScript इंजन द्वारा कहा जाता है और कोणीय कोई है ES6 में वर्ग की एक विशेषता के रूप में माना जाता है उस पर नियंत्रण।

import {Component} from '@angular/core';
@Component({})
class CONSTRUCTORTEST {

//This is called by Javascript not the Angular.
     constructor(){
        console.log("view constructor initialised");
     }
}

"कंस्ट्रक्टरटेस्ट" क्लास को तुरंत तैयार किया जाता है, इसलिए यह आंतरिक रूप से कंस्ट्रक्टर को कॉल करता है (ये सभी जावास्क्रिप्ट (es6) no Angular) से होते हैं।

new CONSTRUCTORTEST();

यही कारण है कि Angular.ngOnInit रेंडर में ngOnInit lifecycle हुक है जब Angular घटक को इनिशियलाइज़ करना समाप्त कर देता है।

import {Component} from '@angular/core';
@Component({})
class NGONINITTEST implements onInit{
   constructor(){}
   //ngOnInit calls by Angular
   ngOnInit(){
     console.log("Testing ngOnInit");
   }
}

सबसे पहले हम क्लास को तुरंत तैयार करते हैं, जो कि कंस्ट्रक्टर विधि के तत्काल रन से होता है।

let instance = new NGONINITTEST();

ngOnInit को जब आवश्यक हो तो कोणीय द्वारा बुलाया जाता है:

instance.ngOnInit();

लेकिन आप पूछ सकते हैं कि हम एंगुलर में कंस्ट्रक्टर का उपयोग क्यों कर रहे हैं?

उत्तर निर्भरता इंजेक्शन है । जैसा कि पहले उल्लेख किया गया है, जावास्क्रिप्ट इंजन द्वारा रचनाकार तुरंत कॉल करता है जब कक्षा तुरंत होती है (एनगॉन द्वारा कॉल करने से पहले) कोणीय हम उस विशिष्ट घटक में किस प्रकार की निर्भरता का उपयोग करना चाहते हैं।

— Negin
स्रोत

7

यहाँ देखने के लिए दो बातें:

जब भी किसी ऑब्जेक्ट को उस वर्ग से बनाया जाता है, तो कंस्ट्रक्टर को कहा जाता है।
ngOnInit घटक बनने के बाद कहा जाता है।

दोनों की अलग-अलग उपयोगिता है।

— UniCoder
स्रोत

5

कंस्ट्रक्टर () घटक जीवन चक्र में डिफ़ॉल्ट विधि है और इसका उपयोग निर्भरता इंजेक्शन के लिए किया जाता है। कंस्ट्रक्टर एक टाइपस्क्रिप्ट फ़ीचर है।

ngOnInit () कंस्ट्रक्टर के बाद कहा जाता है और ngOnInit को पहले ngOnChanges के बाद कहा जाता है।

अर्थात:

कंस्ट्रक्टर () -->ngOnChanges () -->ngOnInit ()

जैसा कि ऊपर उल्लेख किया गया ngOnChanges()है जब एक इनपुट या आउटपुट बाइंडिंग मान बदलता है।

— शाज़िन चंद्रन
स्रोत

4

दोनों विधियों के अलग-अलग लक्ष्य / जिम्मेदारियाँ हैं। निर्माणकर्ता का कार्य (जो एक भाषा समर्थित सुविधा है) यह सुनिश्चित करना है कि प्रतिनिधित्व अपरिवर्तनीय है। अन्यथा यह सुनिश्चित करने के लिए कहा गया है कि सदस्य को सही मान देकर उदाहरण मान्य है। यह तय करने के लिए डेवलपर पर निर्भर है कि 'सही' का क्या मतलब है।

ऑनइनिट () विधि (जो एक कोणीय अवधारणा है) का कार्य विधि ऑब्जेक्ट को एक सही ऑब्जेक्ट (प्रतिनिधित्व अक्रियाशील) पर अनुमति देने के लिए है। प्रत्येक विधि बदले में यह सुनिश्चित करना चाहिए कि विधि समाप्त होने पर प्रतिनिधित्व अपरिवर्तनीय रखता है।

कंस्ट्रक्टर का उपयोग 'सही' ऑब्जेक्ट बनाने के लिए किया जाना चाहिए, ऑनिट विधि आपको एक अच्छी तरह से परिभाषित उदाहरण पर विधि कॉल को आमंत्रित करने का अवसर देती है।

— ब्रूनो रैन्शर्ट
स्रोत

4

कंस्ट्रक्टर: एक ES6 वर्ग (या इस मामले में टाइपस्क्रिप्ट) पर निर्माण विधि एक कक्षा की एक विशेषता है, बजाय एक कोणीय सुविधा के। जब निर्माणकर्ता को आमंत्रित किया जाता है, तो इसका मतलब यह है कि कोणीय ने घटक को शुरू करना समाप्त कर दिया है, यह बताने के लिए उपयुक्त हुक नहीं है कि यह कोणीय के नियंत्रण से बाहर है। जावास्क्रिप्ट इंजन कंस्ट्रक्टर को कॉल करता है, सीधे कोणीय नहीं। यही कारण है कि ngOnInit (और AngularJS में $ onInit) जीवन चक्र हुक बनाया गया था। इसे ध्यान में रखते हुए, कंस्ट्रक्टर का उपयोग करने के लिए एक उपयुक्त परिदृश्य है। यह तब है जब हम निर्भरता इंजेक्शन का उपयोग करना चाहते हैं - अनिवार्य रूप से घटक में "तारों" निर्भरता के लिए।

जैसा कि कंस्ट्रक्टर को जावास्क्रिप्ट इंजन द्वारा आरम्भ किया जाता है, और टाइपस्क्रिप्ट हमें कोणीय को यह बताने की अनुमति देता है कि हमें किसी विशिष्ट संपत्ति के लिए किन निर्भरताओं की आवश्यकता है।

ngOnInit पूरी तरह से हमें एक संकेत देने के लिए है कि एंगुलर ने घटक को शुरू करना समाप्त कर दिया है।

इस चरण में गुणों के खिलाफ परिवर्तन जांच में पहला पास शामिल है जिसे हम घटक से ही बाँध सकते हैं - जैसे @Input () डेकोरेटर का उपयोग करना।

इसके कारण, @Input () गुण ngOnInit के अंदर उपलब्ध हैं, हालाँकि डिज़ाइन द्वारा, निर्माणकर्ता के अंदर अपरिभाषित हैं

— विशाल गुलाटी
स्रोत

2

कंस्ट्रक्टर पहला है, और यह कभी-कभी तब होता है जब @input डेटा शून्य होता है! इसलिए हम घोषित सेवाओं और ngOnInit के लिए कंस्ट्रक्टर का उपयोग करते हैं। विरोधाभास के लिए छूट:

 constructor(translate: TranslateService, private oauthService: OAuthService) {
    translate.setDefaultLang('En');
        translate.use('En');}

OnInit के लिए छूट:

ngOnInit() {
    this.items = [
      { label: 'A', icon: 'fa fa-home', routerLink: ['/'] },
      { label: 'B', icon: 'fa fa-home', routerLink: ['/'] }]
}

मुझे लगता है कि onInit winForm में InitialCompords () की तरह है।

— user1012506
स्रोत

1

कोणीय जीवन-चक्रों में

1) कोणीय इंजेक्टर कंस्ट्रक्टर पैरामीटर (एस) और इंस्टेंटेज क्लास का पता लगाता है।

2) अगला कोणीय जीवन-चक्र कहते हैं

कोणीय जीवनचक्र के हुक

ngOnChanges -> डायरेक्टिव पैरामीटर बाइंडिंग में कॉल करें।

ngOnInit -> कोणीय प्रतिपादन प्रारंभ करें ...

कोणीय जीवन-चक्र की स्थिति के साथ अन्य विधि को बुलाओ।

— मोसमल शाहस्वान
स्रोत

1

constructorजब कोणीय "instanciates / निर्माणों" घटक कहा जाता है। ngOnInitविधि एक हुक जो घटक जीवन चक्र के प्रारंभ हिस्से का प्रतिनिधित्व करता है। एक अच्छा अभ्यास केवल सेवा इंजेक्शन के लिए इसका उपयोग करना है :

constructor(private 
    service1: Service1,
    service2: Service2
){};

यहां तक कि अगर यह संभव है, तो आपको अंदर कुछ "काम" नहीं करना चाहिए। यदि आप कुछ कार्रवाई शुरू करना चाहते हैं जो घटक "इनिशियलाइज़ेशन" पर घटित होती है, तो उपयोग करें ngOnInit:

ngOnInit(){
    service1.someWork();
};

इसके अलावा, ऐसे कार्य जिनमें इनपुट गुण शामिल होते हैं , एक मूल घटक से आते हैं , यह समापक में नहीं किया जा सकता है। उन्हें ngOnInitविधि या किसी अन्य हुक में रखा जाना चाहिए । यह दृश्य (DOM) से संबंधित तत्व के लिए समान है, उदाहरण के लिए, दृश्य तत्वों :

@Input itemFromParent: string;
@ViewChild('childView') childView;

constructor(){
    console.log(itemFromParent); // KO
    // childView is undefined here
};

ngOnInit(){
    console.log(itemFromParent); // OK
    // childView is undefined here, you can manipulate here
};

— veben
स्रोत

0

constructor() निर्भरता इंजेक्शन करने के लिए प्रयोग किया जाता है।

ngOnInit(), ngOnChanges()और ngOnDestroy()आदि जीवनचक्र विधियां हैं। ngOnChanges()पहले बुलाया जाएगा, इससे पहले ngOnInit(), जब एक बाध्य संपत्ति का मूल्य बदलता है, तो यह नहीं कहा जाएगा कि कोई बदलाव नहीं हुआ है। ngOnDestroy()घटक हटाए जाने पर कहा जाता है। इसका उपयोग करने के लिए, वर्ग द्वारा संपादित OnDestroyकरने की आवश्यकता है implement।

— xameeramir
स्रोत

1

सहमत हूँ, यह छोटा और स्पष्ट है। उदाहरण के लिए, कन्स्ट्रक्टर () सेवा वस्तुओं को जोड़ने के लिए है, ngOnInit () आवश्यक सेवा फ़ंक्शन कॉल के साथ घटकों में हेरफेर करने के लिए है।

— स्टीव

0

मुझे जवाब मिला और मैंने इसे अंग्रेजी में अनुवाद करने की कोशिश की: यह सवाल अभी भी पैदा हुआ है, यहां तक कि तकनीकी साक्षात्कार में भी। वास्तव में, दोनों के बीच एक बड़ा समानता है, लेकिन कुछ अंतर भी हैं।

कंस्ट्रक्टर ECMAScript का हिस्सा है। दूसरी ओर ngOnInit () कोणीय की एक धारणा है।
हम सभी वर्गों में निर्माणकर्ताओं को कॉल कर सकते हैं, भले ही हम कोणीय का उपयोग न करें
जीवन चक्र: निर्माता को ngOnInt () से पहले बुलाया जाता है
कंस्ट्रक्टर में हम HTML एलिमेंट्स को कॉल नहीं कर सकते हैं। हालाँकि, ngOnInit () में हम कर सकते हैं।
आम तौर पर, ngOnInit () में सेवाओं के कॉल और निर्माणकर्ता में नहीं

स्रोत: http://www.angular-tuto.com/Angular/Component#Diff

— doudou
स्रोत

0

निर्माता

कंस्ट्रक्टर फ़ंक्शन हर वर्ग के साथ आता है, निर्माता एंगुलर के लिए विशिष्ट नहीं हैं, लेकिन ऑब्जेक्ट ओरिएंटेड डिज़ाइन से प्राप्त अवधारणाएं हैं। कंस्ट्रक्टर घटक वर्ग का एक उदाहरण बनाता है।

OnInit

ngOnInitसमारोह एक कोणीय घटक के जीवन चक्र के तरीकों में से एक है। कोणीय घटकों में जीवन चक्र के तरीके (या हुक) आपको एक घटक के जीवन के विभिन्न चरणों में कोड का एक टुकड़ा चलाने की अनुमति देते हैं। कंस्ट्रक्टर विधि के विपरीत, ngOnInitविधि एक कोणीय इंटरफ़ेस ( OnInit) से आती है जिसे इस विधि का उपयोग करने के लिए घटक को लागू करने की आवश्यकता होती है। ngOnInitविधि शीघ्र ही कहा जाता है के बाद घटक बनाई गई है है।

— दिसंबर
स्रोत

0

वर्ग के त्वरित होने पर कंस्ट्रक्टर को निष्पादित किया जाता है। इसका कोणीय से कोई लेना-देना नहीं है। यह जावास्क्रिप्ट की विशेषता है और कोणीय का इस पर नियंत्रण नहीं है

NgOnInit कोणीय विशिष्ट है और इसे तब कहा जाता है जब कोणीय ने अपने सभी इनपुट गुणों के साथ घटक को इनिशियलाइज़ किया है

@Input गुण ngOnInit जीवनचक्र हुक के तहत उपलब्ध हैं। यह आपको कुछ इनिशियलाइज़ेशन सामान करने में मदद करेगा जैसे बैक-एंड सर्वर से डेटा प्राप्त करना आदि

@ निर्मित गुण कंस्ट्रक्टर के अंदर अपरिभाषित दिखाए जाते हैं

— dasunse
स्रोत

-1

कंस्ट्रक्टर एक फ़ंक्शन होता है जिसे कंपोनेंट (या अन्य क्लास) बनाया जाता है।

ngOnInit एक घटक जीवन-चक्र विधि समूहों से संबंधित कार्य है और वे हमारे घटक के एक अलग क्षण में निष्पादित होते हैं (इसीलिए इसे जीवन-चक्र नाम दिया गया है)। यहाँ उन सभी की एक सूची है:

किसी भी जीवन-चक्र समारोह से पहले कंस्ट्रक्टर को निष्पादित किया जाएगा।

— प्रेज़ेमेक स्ट्रूसिस्की
स्रोत

कंस्ट्रक्टर और ngOnInit के बीच अंतर