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




typescript (15)

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

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

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

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

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

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

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

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

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


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

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

कंस्ट्रक्टर और 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) {}

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


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


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

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

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


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

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

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

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

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


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

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


}

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


मैं सिर्फ एक महत्वपूर्ण बात ngOnInit जो ऊपर दिए गए स्पष्टीकरण में छोड़ दी गई थी और बताती है कि कब आप ngOnInit उपयोग 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
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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


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

new MyClass(someArg);

ngOnInit एक जीवन चक्र हुक है जिसे Angular2 द्वारा संकेत दिया जाता है कि यह इंगित करता है कि Angular घटक बना रहा है।

हमें इस तरह का उपयोग करने के लिए 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 () "शुरू" करने के लिए बेहतर जगह है - यह वह जगह है जहां / जब घटकों के बाइंडिंग हल होते हैं।

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


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() 
   }
}

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

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


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

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

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

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


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

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

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

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

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


कंस्ट्रक्टर जावास्क्रिप्ट में एक विधि है और इसे 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 जीवनचक्र हुक है जब 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();

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

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





ngoninit