කෝණික ජීවන චක්‍ර කොක්කක් සපයයි ngOnInit පෙරනිමියෙන් .

ngOnInitඅපට දැනටමත් තිබේ නම් භාවිතා කළ යුත්තේ ඇයි constructor?

මෙම Constructorපන්ති instantiated විට ක්රියාත්මක වන බව පන්තියේ පෙරනිමි ක්රමය වන අතර පන්තියේ ක්ෂේත්ර සහ එහි උප වර්ගිකරණයන් නිසි ඇරඹීම සහතික කරයි. කෝණික හෝ වඩා හොඳ යැපුම් ඉන්ජෙක්ටර් (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 () යනු "ආරම්භ කිරීමට" වඩා හොඳ ස්ථානයකි - එය සංරචක බන්ධන නිරාකරණය කරන ස්ථානය / විට ය.

වැඩි විස්තර සඳහා මෙහි බලන්න:

• https://angular.io/api/core/OnInit

• කෝණික සංරචක ඉදිකිරීම්කරු එදිරිව

ලිපිය කෝණික භාෂාවෙන් ඉදිකිරීම්කරු සහ ngOnInit අතර අත්‍යවශ්‍ය වෙනස බහු දෘෂ්ටිකෝණයන්ගෙන් වෙනස ගවේෂණය කරයි. මෙම පිළිතුර මඟින් සංරචක ආරම්භක ක්‍රියාවලියට අදාළ වැදගත්ම වෙනස පැහැදිලි කිරීමක් සපයන අතර එය භාවිතයේ වෙනස්කම ද පෙන්වයි.

කෝණික බූට්ස්ට්‍රැප් ක්‍රියාවලිය ප්‍රධාන අදියර දෙකකින් සමන්විත වේ:

• සංරචක ගස ඉදිකිරීම
• ධාවන වෙනස හඳුනාගැනීම

සංරචක ගස කෝණික විසින් සාදන විට සංරචකයේ ඉදිකිරීම්කරු ලෙස හැඳින්වේ. සියළුම ජීවන චක්‍රීය කොකු හැඳින්වෙන්නේ ධාවන වෙනස්වීම් හඳුනාගැනීමේ කොටසක් ලෙස ය.

කෝණික විසින් සංරචක ගස සාදන විට මූල මොඩියුලය ඉන්ජෙක්ටර් දැනටමත් වින්‍යාස කර ඇති බැවින් ඔබට ඕනෑම ගෝලීය පරායත්තතාවයක් එන්නත් කළ හැකිය. එසේම, කෝණික ළමා සංරචක පංතියක් ස්ථාපනය කරන විට, මව් සංරචකය සඳහා ඉන්ජෙක්ටර් ද දැනටමත් සකසා ඇති අතර එමඟින් මව් සංරචකය ඇතුළුව මව් සංරචකය මත අර්ථ දක්වා ඇති සැපයුම්කරුවන් එන්නත් කළ හැකිය. ඉන්ජෙක්ටරයේ සන්දර්භය තුළ කැඳවනු ලබන එකම ක්‍රමය සංරචක ඉදිකිරීම්කරුවන් වන අතර එම නිසා ඔබට යම් පරායත්තතාවයක් අවශ්‍ය නම් එම පරායත්තතා ලබා ගත හැකි එකම ස්ථානය එයයි.

කෝණික ආරම්භය වෙනස් වන විට සංරචක ගස ඉදිකර ඇති අතර ගසෙහි ඇති සියලුම සංරචක සඳහා ඉදිකිරීම්කරුවන් කැඳවා ඇත. සෑම සංරචකයකම අච්චු නෝඩ් DOM වෙත එක් කරනු ලැබේ. මෙම @Inputඔබ ඉදිකිරීමටත් ලබා ගත ගුණ ඇති බලාපොරොත්තු විය නො හැකි ය එසේ සන්නිවේදන යාන්ත්රණයක් වෙනස් හඳුනා තුල දි ඇත. එය පසුව ලබා ගත හැකිය ngOnInit.

ඉක්මන් උදාහරණයක් බලමු. ඔබට පහත අච්චුව ඇතැයි සිතමු:

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

එබැවින් කෝණික යෙදුම ඇරඹීමට පටන් ගනී. මා පැවසූ පරිදි එය මුලින්ම එක් එක් සංරචක සඳහා පන්ති නිර්මාණය කරයි. එබැවින් එය MyAppComponentඉදිකිරීම්කරු ලෙස හැඳින්වේ . එය my-appසංරචකයේ ධාරක අංගය වන DOM නෝඩයක් ද නිර්මාණය කරයි . ඉන්පසු එය 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ඔබට අවශ්‍ය දේ මත පදනම්ව කළ හැකිය. නිදසුනක් ලෙස මෙහි ලිපිය isViewChild විමසුම ඇගයීමට පෙර ViewContainerRef ලබා ගන්නේ කෙසේද යන්න පෙන්වන්නේ ඉදිකිරීම්කරු තුළ කුමන ආකාරයේ ආරම්භක තර්කනයක් සිදු කළ යුතුද යන්නයි.

මාතෘකාව වඩා හොඳින් තේරුම් ගැනීමට ඔබට උපකාරී වන ලිපි කිහිපයක් මෙන්න:

• කෝණික වෙනස්වීම් හඳුනා ගැනීම ගැන ඔබ දැනගත යුතු සියල්ල
• Angular හි $ digest කෝණිකයේ නවතම අනුවාදයේ නැවත ඉපදේ
• දේපල බන්ධනවල යාන්ත්‍ර විද්‍යාව කෝණිකයෙන් යාවත්කාලීන වේ

මම හිතන්නේ හොඳම උදාහරණය සේවා භාවිතා කිරීමයි. මගේ සංරචකය 'සක්‍රිය' වූ විට මගේ සේවාදායකයෙන් දත්ත ලබා ගැනීමට මට අවශ්‍ය යැයි කියමු. සේවාදායකයෙන් දත්ත ලබාගත් පසු මට තවත් අමතර දේවල් කිරීමට අවශ්‍ය යැයි කියමු, සමහර විට මට දෝෂයක් ඇති වී එය වෙනස් ආකාරයකින් ලොග් කිරීමට අවශ්‍යය.

ඉදිකිරීම්කරුවෙකු හරහා 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 අමතා මගේ පරිශීලක ලැයිස්තුව ලැයිස්තුගත කළ හැකිය, නමුත් සමහර විට මට ඒ සමඟ අමතර දේවල් කිරීමට අවශ්‍ය වනු ඇත. සෑම දෙයක්ම ඉහළ_කේස් බව සහතික කර ගන්නවා සේම, මගේ දත්ත පැමිණෙන්නේ කෙසේදැයි මට සම්පූර්ණයෙන්ම විශ්වාස නැත.

එබැවින් 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කොටසක් ෙකෝණික ජිවන චක්රය අතර constructorකොටසක් ES6 JavaScript පන්ති, ඒ නිසා මෙතන සිට ප්රධාන වෙනස ආරම්භ! ...

කෝණිකයේ ජීවන චක්‍රය පෙන්වන මා විසින් නිර්මාණය කරන ලද පහත වගුව දෙස බලන්න.

Angular2 + හි අප වෙනුවෙන් අප භාවිතා constructorකරන DI(Dependency Injection)අතර කෝණික 1 හි එය සිදුවන්නේ String ක්‍රමයට ඇමතීමෙන් සහ කුමන යැපීම එන්නත් කර ඇත්දැයි පරීක්ෂා කිරීමෙනි .

ඉහත රූප සටහනේ ඔබ දකින පරිදි, 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!');
  }
}

පළමු එක (ඉදිකිරීම්කරු) පන්ති ක්ෂණිකකරණයට සම්බන්ධ වන අතර කෝණික 2 සමඟ කිසිදු සම්බන්ධයක් නැත. මම අදහස් කළේ ඕනෑම පන්තියක ඉදිකිරීම්කරුවෙකු භාවිතා කළ හැකිය. අළුතින් සාදන ලද අවස්ථාව සඳහා ඔබට ආරම්භක සැකසුම් කිහිපයක් දැමිය හැකිය.

දෙවැන්න Angular2 සංරචකවල ජීවන චක්‍රීය කොක්කකට අනුරූප වේ:

නිල කෝණික වෙබ් අඩවියෙන් උපුටා ගත්:

• ngOnChanges ආදාන හෝ ප්‍රතිදාන බන්ධන අගය වෙනස් වන විට එය හැඳින්වේ
• ngOnInit පළමුවැන්නෙන් පසුව හැඳින්වේ ngOnChanges

එබැවින් ngOnInitආරම්භක සැකසුම සංරචකයේ බන්ධන මත රඳා පවතී නම් ඔබ භාවිතා කළ යුතුය (නිදසුනක් ලෙස සංරචක පරාමිතීන් සමඟ අර්ථ දක්වා ඇත @Input), එසේ නොමැති නම් ඉදිකිරීම්කරු ප්‍රමාණවත් වනු ඇත ...

මම ඉහත පැහැදිලි කිරීම් තුල හැරී ඇති බව එක් වැදගත් දෙයක් එකතු කරන්න සහ ඔබ විට පැහැදිලි වනු ඇත යුතුය භාවිතා 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
  }
}

කෙටි හා සරල පිළිතුර වනුයේ,

Constructor: constructorයනු සං component ටකයක් තැනීමේදී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() 
   }
}

සම්පත්: ලයිෆ් සයිකල් කොක්ක

මේ දෙකම ක්‍රියාත්මක කරන බව පෙන්වන මෙම කුඩා නිරූපණය ඔබට පරීක්ෂා කළ හැකිය .

මෙය පරීක්ෂා කිරීම සඳහා, මම මෙම කේතය ලිව්වේ, ස්වදේශික ස්ක්‍රිප්ට් නිබන්ධනයෙන් ණයට ගනිමින් :

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

වෙනත් භාෂා රාශියක් මෙන්, ඔබට පන්ති මට්ටමින්, ඉදිකිරීම්කරු හෝ ක්‍රමයකින් විචල්‍යයන් ආරම්භ කළ හැකිය. ඔවුන්ගේ විශේෂිත අවස්ථාවෙහිදී හොඳම දේ තීරණය කිරීම සංවර්ධකයා සතු ය. නමුත් තීරණය කිරීමේදී හොඳම භාවිතයන් ලැයිස්තුවක් පහත දැක්වේ.

පන්ති මට්ටමේ විචල්යයන්

සාමාන්‍යයෙන්, ඔබ ඔබේ සියලුම විචල්‍යයන් මෙහි ප්‍රකාශ කරනු ඇත. අගය වෙනත් කිසිවක් මත රඳා නොපවතින්නේ නම් ඔබට ඒවා ආරම්භ කළ හැකිය, නැතහොත් නියතයන් වෙනස් නොවන්නේ නම් ඒවා සෑදීමට const keyword භාවිතා කරන්න.

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

ටීඑල්ඩීආර්

ඔබ කෝණික 2 රාමුවක් භාවිතා කරන්නේ නම් සහ ඇතැම් ජීවන චක්‍රීය සිදුවීම් සමඟ අන්තර් ක්‍රියා කිරීමට අවශ්‍ය නම්, ගැටළු මඟහරවා ගැනීම සඳහා රාමුව මඟින් සපයන ක්‍රම භාවිතා කරන්න.

ඉදිකිරීම්කරු අතර ඇති ප්‍රධාන වෙනස 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);
  }
}

ධාවන කොන්දේසි තිබේ නම් (ආරම්භක දෝෂයක් මත සං component ටකයක් නොපෙන්විය යුතු එකක් ඇතුළුව), අසමමුහුර්ත ආරම්භක ක්‍රියාවලිය සංරචක ස්ථාපනය කිරීමට පෙර සිදුවිය යුතු අතර මව් සංරචකය, රවුටරයේ ආරක්ෂකයා යනාදිය වෙත ගෙන යා යුතුය.

ඒකක පරීක්ෂණ

ngOnInitඉදිකිරීම්කරුවකුට වඩා නම්‍යශීලී වන අතර මෙම පිළිතුරෙහි විස්තරාත්මකව විස්තර කර ඇති ඒකක පරීක්ෂණ සඳහා යම් ප්‍රතිලාභ ලබා දෙයි .

බව සලකා ngOnInitඒකකය පරීක්ෂණ, කැඳවා ඇති බව ක්රම අංගයක් පොතක් සකස් කිරීම ස්වයංක්රීයව කැඳවා නැතngOnInit අංගයක් හිතන්න උගන්වන්න පසු ඔත්තු හෝ සමච්චල් කරමින් කළ හැක.

සුවිශේෂී අවස්ථාවන්හිදී ngOnInitඅනෙකුත් සංරචක ඒකක සඳහා හුදකලාව සැපයීම සඳහා මුළුමනින්ම මුරණ්ඩු විය හැකිය (නිදසුනක් ලෙස, සමහර අච්චු තර්කනය).

උරුමය

ළමා පංතිවලට කළ හැක්කේ ඉදිකිරීම්කරුවන් වැඩි කිරීම මිස ඔවුන් වෙනුවට නොවේ.

සිට thisපෙර සඳහන් කළ නොහැකි super()ඇරඹෙන තැනක්ද මෙම තබන සීමාවන්,.

ngOnInitකාල සංවේදී නොවන ආරම්භක තර්කනය සඳහා කෝණික සංරචකය හෝ විධානයන් භාවිතා කරන බව සලකන විට , ළමා පන්තිවලට super.ngOnInit()කැඳවනු ලබන්නේ කවදාද යන්න තෝරා ගත හැකිය :

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

ඉදිකිරීම්කරු සමඟ පමණක් මෙය ක්‍රියාත්මක කළ නොහැක.

ඉහත ප්‍රශ්නවල මුල් ප්‍රශ්නයේ මෙම අංගයට සැබවින්ම පිළිතුරු නොලැබේ: ජීවන චක්‍ර කොක්කක් යනු කුමක්ද? මම මේ ආකාරයෙන් සිතන තුරු එහි තේරුම තේරුම් ගැනීමට මට යම් කාලයක් ගත විය.

1) ඔබේ සංරචකය මිනිසෙකු යැයි පවසන්න. මිනිසුන්ගේ ජීවිත බොහෝ අවධීන් ඇතුළත් වන අතර පසුව අපි කල් ඉකුත් වෙමු.

2) අපගේ මානව සං component ටකයට පහත ජීවන චක්‍ර පිටපතක් තිබිය හැකිය: උපත, ළදරු, ශ්‍රේණියේ පාසල, තරුණ වැඩිහිටි, මැදිවියේ වැඩිහිටි, ජ්‍යෙෂ් Ad වැඩිහිටි, මියගිය, බැහැර කරන ලද.

3) ළමයින් නිර්මාණය කිරීම සඳහා ඔබට ශ්‍රිතයක් අවශ්‍ය යැයි පවසන්න. මෙය සංකීර්ණ හා හාස්‍යයට පත් නොවී සිටීමට නම්, ඔබේ ක්‍රියාකාරිත්වය මානව සංරචක ජීවිතයේ තරුණ වැඩිහිටි අවධියේදී පමණක් කැඳවනු ලැබේ. එබැවින් ඔබ මව් සං component ටකය තරුණ වැඩිහිටි අවධියේ සිටින විට පමණක් ක්‍රියාකාරී වන සං component ටකයක් වර්ධනය කරයි. ජීවිතයේ එම අවධිය සං aling ා කිරීමෙන් සහ ඔබේ සංරචකය ඒ මත ක්‍රියා කිරීමට ඉඩ දීමෙන් කොකු ඔබට එය කිරීමට උපකාරී වේ.

විනෝදජනක දේවල්. ඔබේ පරිකල්පනය ඇත්ත වශයෙන්ම මේ වගේ දෙයක් කේතනය කිරීමට ඉඩ දුන්නොත් එය සංකීර්ණ හා විහිලු සහගත වේ.

මෙම ඉදිකිරීමටත් JavaScript තුළ ක්රමය වන අතර es6 .ඒ තුළ පන්තියේ ලක්ෂණය පන්ති instantiated වන පරිදි එය වහාම එය ෙකෝණික රාමුව තුළ හෝ එය JavaScript එන්ජිම විසින් කැඳවා ඇති අතර ෙකෝණික නැති not.So භාවිතා යන්න ඉදිකිරීමටත් දිවෙන සැලකේ එය පාලනය කරන්න.

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

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

"කන්ස්ට්‍රක්ටර් ටෙස්ට්" පංතිය පහත දැක්වේ; එබැවින් එය අභ්‍යන්තරව ඉදිකිරීම්කරු ලෙස හැඳින්වේ (මේ සියල්ල සිදුවන්නේ ජාවාස්ක්‍රිප්ට් (es6) කෝණික නොවේ).

new CONSTRUCTORTEST();

Angular.ngOnInit හි ජීවන චක්‍රීය කොක්කක් ඇත්තේ එබැවිනි .

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 කෝණිකයෙන් ඇමතීමට පෙර), එබැවින් යතුරු ලියනය මඟින් අපට පරායත්තතාවයේ වර්ගය නිර්වචනය කර ඉදිකිරීම්කරු තුළ අර්ථ දක්වා ඇති අතර අවසානයේ කියයි එම විශේෂිත සංරචකය තුළ අපට භාවිතා කිරීමට අවශ්‍ය කුමන ආකාරයේ පරායත්තතාවයන් කෝණික වේ.

මෙහිදී නිරීක්ෂණය කළ යුතු කරුණු දෙකක්:

1. එම පන්තියේ වස්තුවක් නිර්මාණය වූ සෑම විටම ඉදිකිරීම්කරු ලෙස හැඳින්වේ.
2. සංරචකය නිර්මාණය කළ පසු ngOnInit කැඳවනු ලැබේ.

දෙකම එකිනෙකට වෙනස් භාවිතයන් ඇත.

ඉදිකිරීම්කරු () යනු සංරචක ජීවන චක්‍රයේ පෙරනිමි ක්‍රමය වන අතර එය පරායත්ත එන්නත් කිරීම සඳහා භාවිතා කරයි. ඉදිකිරීම්කරු යනු යතුරු ලියනය කිරීමේ ලක්ෂණයකි.

ngOnInit () ඉදිකිරීම්කරුගෙන් පසුව ද ngOnInit පළමු ngOnChanges වලින් පසුව ද හැඳින්වේ.

එනම්:

ඉදිකිරීම්කරු () -->ngOnChanges () -->ngOnInit ()

ngOnChanges()ආදාන හෝ ප්‍රතිදාන බන්ධන අගය වෙනස් වන විට ඉහත සඳහන් කළ පරිදි හැඳින්වේ.

මෙම ක්‍රම දෙකටම විවිධ අරමුණු / වගකීම් ඇත. ඉදිකිරීම්කරුගේ කර්තව්‍යය (එය භාෂා සහාය දක්වන ලක්ෂණයකි) නිරූපණය වෙනස් නොවන බව සහතික කර ගැනීමයි. සාමාජිකයින්ට නිවැරදි අගයන් ලබා දීමෙන් එම අවස්ථාව වලංගු බව තහවුරු කර ගැනීම සඳහා වෙනත් ආකාරයකින් ප්‍රකාශ කර ඇත. 'නිවැරදි' යන්නෙහි තේරුම සංවර්ධකයා විසින් තීරණය කළ යුතුය.

OnInit () ක්‍රමයේ කර්තව්‍යය (එය කෝණික සංකල්පයකි) නිවැරදි වස්තුවක් (නිරූපණ ආක්‍රමණ) මත ක්‍රමවේදය ඉල්ලීමට ඉඩ දීම. සෑම ක්‍රමයක්ම ක්‍රමවේදය අවසන් වන විට නිරූපණය වෙනස් නොවන බවට වග බලා ගත යුතුය.

'නිවැරදි' වස්තු නිර්මාණය කිරීම සඳහා ඉදිකිරීම්කරු භාවිතා කළ යුතු අතර, හොඳින් අර්ථ දක්වා ඇති අවස්ථාවකදී ක්‍රම ඇමතුම් ලබා ගැනීමට onInit ක්‍රමය මඟින් අවස්ථාව ලබා දේ.

ඉදිකිරීම්කරු: ES6 පන්තියක (හෝ මේ අවස්ථාවේ ටයිප්ස්ක්‍රිප්ට්) ඉදිකිරීම්කරු ක්‍රමය යනු කෝණික අංගයකට වඩා පන්තියේම ලක්ෂණයකි. ඉදිකිරීම්කරුට ආයාචනා කරන විට එය කෝණික පාලනයෙන් බැහැර වේ, එයින් අදහස් කරන්නේ සංරචකය ආරම්භ කිරීම කෝණික විසින් අවසන් කළ විට එය ඔබට දැනුම් දීමට සුදුසු කොක්කක් නොවන බවයි. ජාවාස්ක්‍රිප්ට් එන්ජිම කෝණ කෙලින්ම නොව ඉදිකිරීම්කරු අමතයි. NgOnInit (සහ AngularJS හි I onInit) ජීවන චක්‍රීය කොක්ක නිර්මාණය කළේ එබැවිනි. මෙය මනසේ තබා ගනිමින්, ඉදිකිරීම්කරු භාවිතා කිරීම සඳහා සුදුසු අවස්ථාවක් තිබේ. මෙය අපට පරායත්ත එන්නත් භාවිතා කිරීමට අවශ්‍ය වූ විටය - අත්‍යවශ්‍යයෙන්ම සංරචකයට යැපීම් “රැහැන්ගත කිරීම” සඳහා.

ජාවාස්ක්‍රිප්ට් එන්ජිම මඟින් ඉදිකිරීම්කරු ආරම්භ කර ඇති අතර, ටයිප්ස්ක්‍රිප්ට් අපට නිශ්චිත දේපලකට අනුරූපණය කිරීමට අවශ්‍ය පරායත්තයන් කෝණික ලෙස පැවසීමට ඉඩ දෙයි.

සං g ටකය ආරම්භ කිරීම කෝණික විසින් අවසන් කර ඇති බවට සං signal ාවක් ලබා දීම සඳහා ngOnInit තනිකරම තිබේ.

මෙම අදියර තුළ අප විසින් සං component ටකයටම සම්බන්ධ කළ හැකි ගුණාංග වලට එරෙහිව වෙනස් කිරීමේ අනාවරණයේ පළමු අවසර පත්‍රය ඇතුළත් වේ - @ ඉන්පුට් () සැරසිලි කරුවෙකු භාවිතා කිරීම වැනි.

මේ නිසා, n ආදාන () ගුණාංග ngOnInit තුළ ඇත, කෙසේ වෙතත් නිර්මාණකරු තුළ නිර්වචනය කර නොමැත

ඉදිකිරීම්කරු පළමුවැන්නා වන අතර සමහර විට එය සිදුවන්නේ @ ආදාන දත්ත අහෝසි වූ විටය! එබැවින් අපි සේවා ප්‍රකාශ කිරීම සඳහා ඉදිකිරීම්කරු භාවිතා කරන අතර 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 හි InitialComponents () හා සමානයි.

පංතිය ක්ෂණික වූ විට ඉදිකිරීම්කරු ක්‍රියාත්මක වේ. එයට කෝණික සමග කිසිදු සම්බන්ධයක් නැත. එය ජාවාස්ක්‍රිප්ට් හි ලක්ෂණය වන අතර කෝණිකයට එය පාලනය කළ නොහැක

NgOnInit කෝණික විශේෂිත වන අතර කෝණික එහි සියලු ආදාන ගුණාංග සමඟ සං component ටකය ආරම්භ කළ විට එය හැඳින්වේ

N ආදාන ගුණාංග ngOnInit ජීවන චක්‍රීය කොක්ක යටතේ ලබා ගත හැකිය. දර්ශනය තුළ දර්ශනය වීම සඳහා පසුපස සේවාදායකයෙන් දත්ත ලබා ගැනීම වැනි ආරම්භක දේවල් කිරීමට මෙය ඔබට උපකාරී වනු ඇත

නිමැවුම් ගුණාංග ඉදිකිරීම්කරු තුළ නිර්වචනය කර නොමැති ලෙස පෙන්වයි

කෝණික ජීවන චක්‍ර තුළ

1) කෝණික ඉන්ජෙක්ටර් විසින් ඉදිකිරීම්කරු පරාමිතීන් (ක්) හඳුනාගෙන ක්ෂණික පන්තිය.

2) ඊළඟ කෝණික ඇමතුම් ජීවන චක්‍රය

කෝණික ජීවන චක්‍ර කොකු

ngOnChanges -> බන්ධන සඳහා යොමු කිරීමේ පරාමිතීන් අමතන්න.

ngOnInit -> කෝණික විදැහුම්කරණය ආරම්භ කරන්න ...

කෝණික ජීවන චක්‍රයේ තත්වය සමඟ වෙනත් ක්‍රමයක් අමතන්න.

මෙම constructorඅවස්ථාවේදී ෙකෝණික "instanciates / නිර්මාණය කරන" සංරචක ලෙස හැඳින්වේ. මෙම ngOnInitක්‍රමය කොක්කක් වන අතර එය සංරචක ජීවන චක්‍රයේ ආරම්භක කොටස නියෝජනය කරයි. හොඳ පුරුද්දක් වන්නේ එය සේවා එන්නත් කිරීම සඳහා පමණක් භාවිතා කිරීමයි :

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

එය කළ හැකි වුවද, ඔබ ඇතුළත යම් "වැඩක්" නොකළ යුතුය. "ආරම්භක" සංරචකයේ සිදුවිය යුතු යම් ක්‍රියාවක් දියත් කිරීමට ඔබට අවශ්‍ය නම්, භාවිතා කරන්න ngOnInit:

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

එපමණක් නොව, මව් සං component ටකයකින් එන ආදාන ගුණාංග ඇතුළත් ක්‍රියා කොන්ත්‍රාත්කරු තුළ කළ නොහැක. ඒවා ngOnInitක්‍රමයට හෝ වෙනත් කොක්කකට දැමිය යුතුය . දර්ශනයට (DOM) සම්බන්ධ මූලද්‍රව්‍ය සඳහා එය සමාන වේ, නිදසුනක් ලෙස, viewchild අංග :

@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
};

ඉදිකිරීම්කරු

ඉදිකිරීම්කරුගේ ක්‍රියාකාරිත්වය සෑම පන්තියකටම අයත් වන අතර, ඉදිකිරීම්කරුවන් කෝණිකයට විශේෂිත නොවන නමුත් ඒවා වස්තු දිශානත මෝස්තර වලින් ලබාගත් සංකල්ප වේ. ඉදිකිරීම්කරු සංරචක පන්තියේ උදාහරණයක් නිර්මාණය කරයි.

OnInit

මෙම ngOnInitඋත්සවයේ දී ෙකෝණික අංගයක් ජීවන චක්රයේ ක්රම වලින් එකක් වේ. කෝණික සංරචකවල ජීවන චක්‍ර ක්‍රම (හෝ කොකු) මඟින් ඔබට සංරචකයක ජීවිතයේ විවිධ අවස්ථා වලදී කේත කැබැල්ලක් ධාවනය කිරීමට ඉඩ ලබා දේ. ඉදිකිරීම්කරු ක්‍රමයට වඩා වෙනස්ව, ngOnInitක්‍රමය පැමිණෙන්නේ OnInitමෙම ක්‍රමය භාවිතා කිරීම සඳහා සංරචකය ක්‍රියාත්මක කළ යුතු කෝණික අතුරුමුහුණතකින් ( ) ය. ngOnInitසංරචකය නිර්මාණය කිරීමෙන් ටික කලකට පසු මෙම ක්‍රමය හැඳින්වේ.

constructor() පරායත්ත එන්නත් කිරීම සඳහා භාවිතා කරයි.

ngOnInit(), ngOnChanges()සහ ngOnDestroy()යනාදිය ජීවන චක්‍ර ක්‍රම වේ. ngOnChanges()පෙර, කියනු ලබන පළමු වනු ඇත ngOnInit()කිසිදු වෙනසක් නොමැති නම් බැඳී දේපල වෙනස්කම් වටිනාකම, එය නමින් කළ නොහැකි වනු ඇත විට,. ngOnDestroy()සංරචකය ඉවත් කළ විට එය හැඳින්වේ. එය භාවිතා කිරීම සඳහා, OnDestroyකළ යුතු implementද පන්තිය විසින් ed.

මම පිළිතුර සොයාගත් අතර එය ඉංග්‍රීසි භාෂාවට පරිවර්තනය කිරීමට උත්සාහ කළෙමි: තාක්ෂණික සම්මුඛ සාකච්ඡා වලදී පවා මෙම ප්‍රශ්නය තවමත් පැන නැගී ඇත. ඇත්ත වශයෙන්ම, මේ දෙක අතර විශාල සමානකමක් ඇත, නමුත් සමහර වෙනස්කම් ද ඇත.

• ඉදිකිරීම්කරු ECMAScript හි කොටසකි. අනෙක් අතට ngOnInit () යනු කෝණික සංකල්පයකි.

• අපි කෝණික භාවිතා නොකලත් සෑම පන්තියකම ඉදිකිරීම්කරුවන් අමතන්න

• ජීවිත චක්‍රය: ඉදිකිරීම්කරු ngOnInt () ට පෙර කැඳවනු ලැබේ

• ඉදිකිරීම්කරු තුළ අපට HTML අංග ඇමතිය නොහැක. කෙසේ වෙතත්, ngOnInit () හි අපට හැකිය.

• සාමාන්‍යයෙන්, සේවා ඇමතුම් ngOnInit () හි මිස ඉදිකිරීම්කරු තුළ නොවේ

  මුලාශ්‍රය: http://www.angular-tuto.com/Angular/Component#Diff

ඉදිකිරීම්කරු යනු සංරචකය (හෝ වෙනත් පන්තියක්) ගොඩනඟන විට ක්‍රියාත්මක කරන ශ්‍රිතයකි.

ngOnInit යනු සංරචක ජීවන චක්‍ර ක්‍රම කණ්ඩායම් වලට අයත් ශ්‍රිතයක් වන අතර ඒවා අපගේ සංරචකයේ වෙනස් මොහොතක ක්‍රියාත්මක වේ (ඒ නිසා නම් ජීවන චක්‍රය නම් කරන්න). මෙන්න ඒ සියල්ලන්ගේ ලැයිස්තුවක්:

ඕනෑම ජීවන චක්‍රයකට පෙර ඉදිකිරීම්කරු ක්‍රියාත්මක කරනු ලැබේ.