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




typescript (18)

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

  • कंस्ट्रक्टर ECMAScript का हिस्सा है। दूसरी ओर ngOnInit () कोणीय की एक धारणा है।

  • हम सभी वर्गों में निर्माणकर्ताओं को कॉल कर सकते हैं भले ही हम कोणीय का उपयोग न करें

  • जीवन चक्र: निर्माता को ngOnInt () से पहले बुलाया जाता है

  • कंस्ट्रक्टर में हम HTML एलिमेंट्स को कॉल नहीं कर सकते हैं। हालाँकि, ngOnInit () में हम कर सकते हैं।

  • आम तौर पर, ngOnInit () में सेवाओं के कॉल और निर्माणकर्ता में नहीं

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

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

यदि हमारे पास पहले से ही एक constructor , तो ngOnInit का उपयोग क्यों किया जाना चाहिए?


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

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

कंस्ट्रक्टर () -> एनजीऑनचेंज () -> एनजीऑनिट ()

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


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

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

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

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

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

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() {
  this.someMethod();
  super.ngOnInit();
}

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

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

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

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

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

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

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

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

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

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

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

विरासत

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

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

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

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

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


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

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

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

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

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

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

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


constructor को तब कहा जाता है जब अंगुलर "घटक को" अस्थिर / निर्माण करता है। 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
};

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

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

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

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


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

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

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

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

  init() {...}
}

निर्माता

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

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

ngOnInit() {
  // rest of initialization code
}

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

NgOnInit

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

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

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

TLDR

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


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

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

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

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

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


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

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

Angular2 + में, हम हमारे लिए DI(Dependency Injection) करने के लिए constructor का उपयोग करते हैं, जबकि 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!');
  }
}

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

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


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

यह वास्तव में 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();
    };


}

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


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

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

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


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

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

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

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

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


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

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

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


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

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

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

  • जब इनपुट या आउटपुट बाइंडिंग मान बदलता है, तो ngOnChanges को कहा जाता है
  • ngOnInit को पहले ngOnChanges बाद कहा जाता है

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


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

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 ***  

कंस्ट्रक्टर पहला है, और यह कभी-कभी तब होता है जब @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 () की तरह है।


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

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

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





ngoninit