কৌণিক ngOnInit
ডিফল্টরূপে জীবনচক্র হুক সরবরাহ করে।
আমাদের ngOnInit
যদি ইতিমধ্যে একটি থাকে তবে কেন ব্যবহার করা উচিত constructor
?
কৌণিক ngOnInit
ডিফল্টরূপে জীবনচক্র হুক সরবরাহ করে।
আমাদের ngOnInit
যদি ইতিমধ্যে একটি থাকে তবে কেন ব্যবহার করা উচিত constructor
?
উত্তর:
Constructor
বর্গ যে যখন বর্গ instantiated এবং ক্লাস এবং তার উপশ্রেণী ক্ষেত্র যথাযথ initialisation নিশ্চিত করা হয় মৃত্যুদন্ড কার্যকর করা হয় একটি ডিফল্ট পদ্ধতি। কৌণিক, বা আরও ভাল ডিপেন্ডেন্সি ইনজেক্টর (ডিআই), কনস্ট্রাক্টর প্যারামিটারগুলি বিশ্লেষণ করে এবং যখন এটি কল করে কোনও নতুন উদাহরণ তৈরি করে এমন নির্মাতাদের সন্ধানের 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
সমস্ত সূচনা / ঘোষণার জন্য ব্যবহার করি এবং কনস্ট্রাক্টরের কাজ করার জন্য স্টাফ এড়ানো করি। কনস্ট্রাক্টরটি কেবল শ্রেণীর সদস্যদের আরম্ভ করার জন্য ব্যবহার করা উচিত তবে প্রকৃত "কাজ" করা উচিত নয়।
সুতরাং আপনার constructor()
নির্ভরতা ইনজেকশন সেটআপ করতে হবে এবং অন্য কিছু নয়। ngOnInit () "শুরু" করার জন্য আরও ভাল জায়গা - এটি যেখানে / যখন উপাদানগুলির বাইন্ডিংগুলি সমাধান করা হয়।
আরও তথ্যের জন্য এখানে দেখুন:
tsconfig.json
ফাইলের মতো কঠোর মোড সত্য হয় "strict": true
তবে আপনাকে ক্লাসের সদস্যদের পছন্দ মতো constructor
নয়, আরম্ভ করতে হবে । ngOnit
FormGroup
নিবন্ধটি কৌনিকটিতে কনস্ট্রাক্টর এবং এনজিওএনইনাইটের মধ্যে প্রয়োজনীয় পার্থক্যটি একাধিক দৃষ্টিকোণ থেকে পার্থক্যটি আবিষ্কার করে। এই উত্তরটি উপাদান সূচনা প্রক্রিয়া সম্পর্কিত সবচেয়ে গুরুত্বপূর্ণ পার্থক্য ব্যাখ্যা সরবরাহ করে যা ব্যবহারের ক্ষেত্রে বিভিন্নটি প্রদর্শন করে।
কৌণিক বুটস্ট্র্যাপ প্রক্রিয়া দুটি প্রধান পর্যায় নিয়ে গঠিত:
যখন কৌণিক উপাদান গাছ তৈরি করে তখন উপাদানটির নির্মাতা বলা হয়। চলমান পরিবর্তন সনাক্তকরণের অংশ হিসাবে সমস্ত লাইফাইসাইকেল হুককে ডাকা হয়।
যখন কৌণিক উপাদান গাছ গাছ তৈরি করে মূল মডিউল ইনজেক্টর ইতিমধ্যে কনফিগার করা থাকে যাতে আপনি কোনও বিশ্বব্যাপী নির্ভরতা ইনজেকশন করতে পারেন। এছাড়াও, যখন কৌণিক একটি শিশু উপাদান শ্রেণীর তাত্ক্ষণিকভাবে পিতামণ্ডলের উপাদানটির জন্য ইনজেক্টরটি ইতিমধ্যে সেট আপ করা থাকে যাতে আপনি পিতা বা মাতা উপাদানটি সহ প্যারেন্ট উপাদানগুলিতে সংজ্ঞায়িত সরবরাহকারীদের ইনজেক্ট করতে পারেন। কম্পোনেন্ট কনস্ট্রাক্টর একমাত্র পদ্ধতি যা ইনজেক্টরের প্রসঙ্গে বলা হয় তাই আপনার যদি কোনও নির্ভরতা প্রয়োজন হয় তবে সেই নির্ভরতাগুলি পাওয়ার একমাত্র জায়গা।
যখন কৌণিক পরিবর্তন শনাক্ত করতে শুরু করে তখন উপাদানগুলি গাছ তৈরি করা হয় এবং গাছের সমস্ত উপাদানগুলির জন্য কনস্ট্রাক্টরকে ডেকে আনা হয়। এছাড়াও প্রতিটি উপাদানগুলির টেমপ্লেট নোডগুলি ডিওমে যুক্ত করা হয়। @Input
যোগাযোগ প্রক্রিয়া পরিবর্তন সনাক্তকরণ সময় প্রক্রিয়াকৃত হয় যাতে আপনি বৈশিষ্ট্য কন্সট্রাকটর পাওয়া আছে আশা করতে পারে না। এটি পরে পাওয়া যাবে ngOnInit
।
আসুন একটি দ্রুত উদাহরণ দেখুন। ধরুন আপনার নীচের টেমপ্লেট রয়েছে:
<my-app>
<child-comp [i]='prop'>
সুতরাং কৌণিক অ্যাপ্লিকেশনটি বুটস্ট্র্যাপ করা শুরু করে। যেমন আমি বলেছি এটি প্রথমে প্রতিটি উপাদানগুলির জন্য ক্লাস তৈরি করে। সুতরাং এটি MyAppComponent
কনস্ট্রাক্টর কল । এটি একটি ডোম নোড তৈরি করে যা উপাদানটির হোস্ট উপাদান my-app
। তারপরে এটি child-comp
ও কলিং ChildComponent
কনস্ট্রাক্টরের জন্য একটি হোস্ট উপাদান তৈরি করতে এগিয়ে যায় । এই পর্যায়ে এটি i
ইনপুট বাঁধাই এবং কোনও জীবনচক্রের হুকগুলির সাথে সত্যই উদ্বিগ্ন নয় । সুতরাং যখন এই প্রক্রিয়াটি সমাপ্ত হয় কৌনিকটি উপাদানগুলির নীচের গাছের সাথে শেষ হয়:
MyAppView
- MyApp component instance
- my-app host element data
ChildCompnentView
- ChildComponent component instance
- child-comp host element data
তারপরেই পরিবর্তন সনাক্তকরণ এবং মাই অ্যাপোকম্পোনটি ক্লাসে my-app
কল ngOnInit
করার জন্য আপডেট বাইন্ডিংগুলি চালনা করে। তারপরে এটি বাইন্ডিংগুলি আপডেট করার জন্য এগিয়ে যায় child-comp
এবং ngOnInit
চাইল্ড কম্পোনেন্ট ক্লাসে কল করে।
আপনি আপনার আরম্ভিক যুক্তিটি নির্মাণকারীর মধ্যে বা ngOnInit
আপনার উপলব্ধ কিসের উপর নির্ভর করে করতে পারেন। উদাহরণস্বরূপ নিবন্ধটি এখানে কীভাবে ViewContainerRef পেতে হবে @ ভিউচিল্ড ক্যোয়ারী মূল্যায়নের আগে দেখায় যে কনস্ট্রাক্টরে কোন ধরণের সূচনা যুক্তির প্রয়োজন হতে পারে।
এখানে কিছু নিবন্ধ যা আপনাকে বিষয়টিকে আরও ভালভাবে বুঝতে সহায়তা করবে:
the constructor should only be used to inject dependencies
।
আমি মনে করি সর্বোত্তম উদাহরণটি পরিষেবাগুলি ব্যবহার করা হবে। বলি যে আমি যখন আমার উপাদানটি 'অ্যাক্টিভেটেড' পেয়েছি তখন আমি আমার সার্ভার থেকে ডেটা ধরতে চাই। ধরা যাক যে আমি সার্ভার থেকে এটি পাওয়ার পরে ডেটাতে কিছু অতিরিক্ত জিনিসও করতে চাই, সম্ভবত আমি একটি ত্রুটি পেয়েছি এবং এটি অন্যরকমভাবে লগ ইন করতে চাই।
কোনও কনস্ট্রাক্টরের উপর এনজিওইনাইট দিয়ে এটি সত্যিই সহজ, এটি আমার অ্যাপ্লিকেশনটিতে আমাকে কয়টি কলব্যাক স্তর যুক্ত করতে হবে তাও সীমাবদ্ধ করে।
উদাহরণ স্বরূপ:
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);
};
}
আমার কনস্ট্রাক্টরের সাহায্যে আমি কেবল আমার _ ব্যবহারকারীর পরিষেবাটি কল করতে এবং আমার ব্যবহারকারীর তালিকা তৈরি করতে পারি, তবে সম্ভবত আমি এটি দিয়ে কিছু অতিরিক্ত জিনিস করতে চাই। সমস্ত কিছু উচ্চরূপে রয়েছে তা নিশ্চিত করার মতো, আমার ডেটা কীভাবে আসবে তা আমি পুরোপুরি নিশ্চিত নই।
সুতরাং এটি এনজিওএনইট ব্যবহার করা আরও সহজ করে তোলে।
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();
};
}
এটি দেখার পক্ষে এটি আরও সহজ করে তোলে এবং তাই অন্য কোথাও এটি খোঁড়ার পরিবর্তে যখন আমি আরম্ভ করি তখন আমি কেবলমাত্র আমার উপাদানটির মধ্যে আমার ফাংশনটি কল করি। ভবিষ্যতে এটি পড়া ও ব্যবহার সহজ করে তুলতে আপনি এটি ব্যবহার করতে পারেন এটি কেবলমাত্র একটি সরঞ্জাম। এছাড়াও আমি এটি নির্মাণের মধ্যে ফাংশন কল করা সত্যিই খারাপ অনুশীলন বলে মনে করি!
getUsers
এবং তারপরে এটি sertোকান ngOnInit
? শুধু এনজিওএনইনেটে এটি লিখতে কম কোড নয়? আমি ভাবছি লোকেরা কেন এভাবে করে? আপনি কি চাইলে কোডটি পুনরায় ব্যবহার করতে পারেন তাই? ধন্যবাদ।
constructor
?
constructor(private _userService: UserService){ this.getUsers(); };
ঠিক আছে, সবার আগে কৌণিক জীবনচক্রেরngOnInit
অংশ , যখন ES6 জাভাস্ক্রিপ্ট শ্রেণীর অংশ , সুতরাং প্রধান পার্থক্যটি এখান থেকেই শুরু হয়! ...constructor
আমি তৈরি নীচের চার্টটি দেখুন যা কৌণিকের জীবনচক্র দেখায়।
Angular2 + এ আমরা আমাদের জন্য constructor
এটি ব্যবহার করতাম DI(Dependency Injection)
, যখন কৌণিক 1 এ স্ট্রিং পদ্ধতিতে কল করে এবং কোনটি নির্ভরতা ইনজেকশন করা হয়েছিল তা যাচাইয়ের মাধ্যমে ঘটছিল ।
যেমন আপনি উপরের চিত্রটিতে দেখছেন, ngOnInit
কনস্ট্রাক্টর প্রস্তুত হওয়ার পরে ঘটছে এবং ngOnChnages
উপাদানটি আমাদের জন্য প্রস্তুত হওয়ার পরে বরখাস্ত হয়ে যায়। সমস্ত সূচনাটি এই পর্যায়ে ঘটতে পারে, একটি সাধারণ নমুনা একটি পরিষেবা ইনজেকশন দেয় এবং এটি আরআইকেতে সূচনা করে।
ঠিক আছে, আমি আপনাকে দেখার জন্য একটি নমুনা কোডটিও ভাগ করি, দেখুন কীভাবে আমরা নীচের কোডটিতে ব্যবহার করি 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 এর সাথে কোনও সম্পর্ক নেই। মানে কোনও কনস্ট্রাক্টর যে কোনও ক্লাসে ব্যবহার করা যেতে পারে। আপনি এটি নতুন তৈরি করা উদাহরণটির জন্য কিছু সূচনা প্রক্রিয়াকরণ রাখতে পারেন।
দ্বিতীয়টি অ্যাঙ্গুলার 2 উপাদানগুলির একটি লাইফাইসাইকেল হুকের সাথে সম্পর্কিত s
অফিসিয়াল কৌনিক ওয়েবসাইট থেকে উদ্ধৃত:
ngOnChanges
যখন একটি ইনপুট বা আউটপুট বাইন্ডিং মান পরিবর্তন হয় তখন ডাকা হয়ngOnInit
প্রথম পরে বলা হয়ngOnChanges
সুতরাং আপনার ব্যবহার করা উচিত ngOnInit
যদি ইনিশিয়ালাইজেশন প্রসেসিং উপাদানটির বাইন্ডিংগুলির উপর নির্ভর করে (উদাহরণস্বরূপ উপাদান সংজ্ঞাগুলি নির্দিষ্ট করে @Input
), অন্যথায় নির্মাণকারীর পক্ষে যথেষ্ট হবে ...
আমি শুধু একটা গুরুত্বপূর্ণ বিষয় যে উপরোক্ত ব্যাখ্যায় এড়ানো এবং ব্যাখ্যা যখন তুমি ছিলে যোগ হবে হবে ব্যবহার ngOnInit
।
যদি আপনি উদাহরণস্বরূপ ভিউচিল্ডেন , কন্টেন্টচিল্ডেন বা এলিমেন্টরিফের মাধ্যমে উপাদানটির ডিওএমের কোনও হেরফের করছেন , তবে আপনার নেটিভ উপাদানগুলি কনস্ট্রাক্টর পর্যায়ে উপলব্ধ হবে না।
যাইহোক, ngOnInit
একবার উপাদান তৈরি হয়ে গেলে এবং চেকগুলি ( ngOnChanges
) বলা হয়ে থাকে আপনি এই মুহুর্তে ডোমটি অ্যাক্সেস করতে পারবেন।
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
}
}
@ViewChildren
বিশেষ করে, আপনি ব্যবহার করতে হবে ngAfterViewInit
পদ্ধতি। : এখানে দেখুন stackoverflow.com/questions/46314734/...
সংক্ষিপ্ত এবং সহজ উত্তর হবে,
Constructor
: উপাদান তৈরি করা হচ্ছে constructor
এমন একটি default method
রান ( বধির দ্বারা )। আপনি যখন an instance
ক্লাস তৈরি করেন তখন সেই সময়টিকেও constructor(default method)
ডাকা হত। সুতরাং অন্য কথায়, যখন উপাদানটি বলা হচ্ছে constructed or/and an instance is created constructor(default method)
এবং তার মধ্যে প্রাসঙ্গিক কোড বলা হয়। মূলত এবং সাধারণত Angular2
এতে services
যখন ব্যবহারের জন্য উপাদান ব্যবহার করা হয় তখন এমন জিনিসগুলি ইনজেকশনে ব্যবহৃত হত ।
OnInit
: এনজিওআইনিট হ'ল উপাদানটির জীবনচক্র হুক যা উপাদানটি শুরু করার পরে প্রথমে চলে 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()
}
}
সংস্থানসমূহ: লাইফসাইকেলের হুক
আপনি এই ছোট ডেমোটি পরীক্ষা করতে পারেন যা উভয় জিনিসই বাস্তবায়ন দেখায়।
new MyClass()
কার্যকর করার সময়ও এটি ডাকা হয়। আমি মনে করি এটি নির্মাণকারীরা উপাদানগুলি সম্পর্কে বলা বিভ্রান্তিমূলক, তারা ক্লাস সম্পর্কে এবং এই শ্রেণীর উদাহরণগুলির সূচনা করে। একটি উপাদান ঠিক যেমন একটি বর্গ হতে পারে। অন্যথায় আমি এটি একটি ভাল উত্তর মনে করি।
constructor
ডাকা হত। তবে এই উত্তরটি কৌনিক 2 প্রসঙ্গে লেখা হয়েছে। সর্বোত্তম উত্তরটি জানার জন্য আপনাকে অবশ্যই ওওপিএস বেসিকগুলি জানতে হবে। তবুও আমি উত্তর আপডেট করব।
প্রচুর অন্যান্য ভাষার মতো আপনিও ক্লাস স্তর, নির্মাতা বা কোনও পদ্ধতিতে ভেরিয়েবল শুরু করতে পারেন। তাদের নির্দিষ্ট ক্ষেত্রে সবচেয়ে ভাল কি তা নির্ধারণ করা বিকাশকারীদের উপর নির্ভর করে। সিদ্ধান্ত নেওয়ার ক্ষেত্রে নীচে সেরা অনুশীলনের তালিকা রয়েছে।
সাধারণত, আপনি এখানে আপনার সমস্ত ভেরিয়েবলগুলি ঘোষণা করবেন যা আপনার বাকী অংশের জন্য ব্যবহৃত হবে। মানটি অন্য কোনও কিছুর উপর নির্ভর না করে আপনি তাদের সূচনা করতে পারেন, বা পরিবর্তন না হলে কনস্ট্যান্ট তৈরি করতে কনট কীওয়ার্ডটি ব্যবহার করুন।
export class TestClass{
let varA: string = "hello";
}
সাধারণত কন্সট্রাক্টরের কিছু না করার এবং এটি কেবল এমন ক্লাসগুলির জন্য ব্যবহার করা ভাল অনুশীলন যা ইনজেকশন দেওয়া হবে। বেশিরভাগ সময় আপনার কনস্ট্রাক্টর এর মতো দেখতে হবে:
constructor(private http: Http, private customService: CustomService) {}
এটি স্বয়ংক্রিয়ভাবে শ্রেণীর স্তরের ভেরিয়েবলগুলি তৈরি করবে, সুতরাং customService.myMethod()
এটি নিজে নিজে না করেই আপনার অ্যাক্সেস থাকবে ।
এনজিওনিট একটি কৌণিক 2 কাঠামোর দ্বারা সরবরাহিত একটি জীবনকাল হুক। OnInit
এটি ব্যবহার করার জন্য আপনার উপাদানটি অবশ্যই প্রয়োগ করতে হবে। কনস্ট্রাক্টর ডেকে সমস্ত ভেরিয়েবল আরম্ভ করার পরে এই লাইফাইসাইকেল হুকটি কল হয়। আপনার আরম্ভের বেশিরভাগ অংশ এখানে যেতে হবে। আপনার কাছে নিশ্চয়তা থাকবে যে কৌণিকর আপনার উপাদানটি সঠিকভাবে শুরু করেছে এবং OnInit
যখন আপনার উপাদানটি সঠিকভাবে লোডিং শেষ না করে আপনি কাজগুলি করতে বনাম আপনার যে কোনও যুক্তি করতে শুরু করতে পারেন ।
এখানে একটি চিত্র যা বলা হয় তার ক্রম বিশদটি দেয়:
https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html
আপনি যদি কৌনিক 2 কাঠামো ব্যবহার করছেন এবং নির্দিষ্ট জীবনচক্রের ইভেন্টগুলির সাথে ইন্টারঅ্যাক্ট করার দরকার পড়েছে তবে সমস্যা এড়াতে ফ্রেমওয়ার্কের সরবরাহিত পদ্ধতিগুলি ব্যবহার করুন।
এটি পরীক্ষা করতে, আমি নেটিস্ক্রিপ্ট টিউটোরিয়াল থেকে ধার করে এই কোডটি লিখেছিলাম :
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
:
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
}
কৌণিক শ্রেণিতে নির্মাণকারীদের প্রাথমিক ভূমিকাটি নির্ভরতা ইনজেকশন। টাইপস্ক্রিপ্টে ডিআই টীকাতেও কনস্ট্রাক্টর ব্যবহার করা হয়। প্রায় সমস্ত নির্ভরতা শ্রেণীর উদাহরণ হিসাবে সম্পত্তি হিসাবে বরাদ্দ করা হয়।
গড় উপাদান / দিকনির্দেশক কনস্ট্রাক্টর ইতিমধ্যে যথেষ্ট বড় কারণ এটি নির্ভরতাজনিত কারণে মাল্টলাইন স্বাক্ষর রাখতে পারে, নির্মাণকারী বডিটিতে অপ্রয়োজনীয় আন্তঃকরণের যুক্তি যুক্ত করে এন্টিপ্যাটার্নকে অবদান রাখে।
অ্যাসিনক্রোনাস ইনিশিয়ালাইজেশন কনস্ট্রাক্টরকে প্রায়শই অ্যান্টিপ্যাটার্ন হিসাবে বিবেচনা করা যায় এবং গন্ধ পাওয়া যায় কারণ অ্যাসিঙ্ক্রোনাস রুটিন করার আগে শ্রেণি তাত্ক্ষণিকতা সমাপ্ত হয় এবং এটি বর্ণের পরিস্থিতি তৈরি করতে পারে। যদি এটি না হয়, 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);
}
}
যদি জাতিগুলির শর্তাদি থাকে (এক্ষেত্রে যে কোনও উপাদান আরম্ভের ত্রুটিতে প্রদর্শিত না হয়) সহ, অ্যাসিঙ্ক্রোনাস ইনিশিয়ালাইজেশন রুটিনটি উপাদান তাত্ক্ষণিকরণের আগে হওয়া উচিত এবং প্যারেন্ট উপাদান, রাউটার গার্ড ইত্যাদিতে স্থানান্তরিত হওয়া ইত্যাদি should
ngOnInit
কনস্ট্রাক্টরের চেয়ে আরও নমনীয় এবং ইউনিট পরীক্ষার জন্য কিছু সুবিধা দেয় যা এই উত্তরে বিস্তারিতভাবে ব্যাখ্যা করা হয়েছে ।
ngOnInit
ইউনিট পরীক্ষায় উপাদান সংকলনে স্বয়ংক্রিয়ভাবে বলা হয় না তা বিবেচনা করে ngOnInit
উপাদানগুলির তাত্ক্ষণিকতার পরে যে পদ্ধতিগুলিতে ডাকা হয় তা গুপ্তচরবৃত্তি বা উপহাস করা যায়।
ব্যতিক্রমী ক্ষেত্রে ngOnInit
অন্যান্য উপাদান ইউনিট (উদাহরণস্বরূপ, কিছু টেমপ্লেট যুক্তি) জন্য বিচ্ছিন্নতা প্রদান সম্পূর্ণরূপে স্ট্যাব করা যেতে পারে।
শিশু ক্লাসগুলি কেবল নির্মাতাদের বৃদ্ধি করতে পারে, তাদের প্রতিস্থাপন করতে পারে না।
যেহেতু this
আগে উল্লেখ করা যায় না super()
, এটি আরম্ভকরণের প্রাধান্যকে বাধা দেয়।
কৌণিক উপাদান বা নির্দেশ ngOnInit
সময়-সংবেদনশীল আরম্ভের যুক্তির জন্য ব্যবহার করে তা বিবেচনা করে , শিশু শ্রেণিগুলি super.ngOnInit()
ডাকা হবে এবং কখন তা চয়ন করতে পারে :
ngOnInit() {
this.someMethod();
super.ngOnInit();
}
একা কনস্ট্রাক্টর দিয়ে প্রয়োগ করা অসম্ভব।
উপরের উত্তরগুলি সত্যই মূল প্রশ্নের এই দিকটির উত্তর দেয় না: একটি জীবনচক্র হুক কী? এর অর্থ কী তা বুঝতে আমি কিছুটা সময় নিয়েছি যতক্ষণ না আমি এইভাবে এটি ভাবিনি।
1) আপনার উপাদানটি একজন মানব বলে is মানুষের জীবন রয়েছে যা জীবনযাপনের বিভিন্ন পর্যায়ে অন্তর্ভুক্ত থাকে এবং তারপরে আমরা মেয়াদ শেষ করি।
2) আমাদের মানব উপাদানগুলির মধ্যে নিম্নলিখিত জীবনচক্র লিপি থাকতে পারে: জন্ম, শিশু, গ্রেড স্কুল, তরুণ প্রাপ্তবয়স্ক, মধ্যবয়স্ক প্রাপ্তবয়স্ক, প্রবীণ বয়স্ক, মৃত, নিষ্পত্তিযোগ্য of
3) বলুন আপনি বাচ্চাদের তৈরির জন্য একটি ফাংশন রাখতে চান। এটিকে জটিল এবং কৌতুকপূর্ণ হওয়া থেকে বাঁচতে আপনি চাইছেন যে আপনার ফাংশনটি কেবলমাত্র মানব উপাদান জীবনের যুব অ্যাডাল্ট পর্যায়ে ডাকা হবে। সুতরাং আপনি এমন একটি উপাদান তৈরি করুন যা কেবলমাত্র পিতামাতারা যখন অল্প বয়স্ক পর্যায়ে থাকে তখন সক্রিয় থাকে। হুকস আপনাকে জীবনের সেই পর্যায়ে সিগন্যাল দিয়ে এবং এতে আপনার উপাদানটিকে কাজ করতে দিয়ে সহায়তা করে।
মজার জিনিস. যদি আপনি আপনার কল্পনাটিকে আসলে এরকম কিছু কোডিং করতে যেতে দেন তা জটিল এবং মজাদার হয়।
কন্সট্রাকটর জাভাস্ক্রিপ্ট মধ্যে একটি পদ্ধতি এবং .When বর্গ instantiated হয় তা অবিলম্বে কন্সট্রাকটর রান কিনা এটা কৌণিক ফ্রেমওয়ার্ক ব্যবহার করা হয় বা not.So এটা জাভাস্ক্রিপ্ট ইঞ্জিন দ্বারা বলা হয় এবং কৌণিক কোন হয়েছে es6 মধ্যে ক্লাসের একটি বৈশিষ্ট্য হিসাবে বিবেচনা করা হয় যে উপর নিয়ন্ত্রণ।
import {Component} from '@angular/core';
@Component({})
class CONSTRUCTORTEST {
//This is called by Javascript not the Angular.
constructor(){
console.log("view constructor initialised");
}
}
"কনস্ট্রাক্টর টেস্ট" ক্লাসটি নীচে ইনস্ট্যান্ট করা হয়েছে; সুতরাং এটি অভ্যন্তরীণভাবে কনস্ট্রাক্টরকে কল করে (এগুলি সমস্ত জাভাস্ক্রিপ্ট দ্বারা হয় (এস es) কোনও কৌণিক নয়)।
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();
নীচের মতো প্রয়োজন হলে কৌনিক দ্বারা এনজিওইনিটকে ডাকা হয়:
instance.ngOnInit();
তবে আপনি জিজ্ঞাসা করতে পারেন কেন আমরা কৌনিকটিতে কনস্ট্রাক্টর ব্যবহার করছি?
উত্তরটি নির্ভরতা ইনজেকশনগুলি .এর আগে যেমন উল্লেখ করা হয়েছে, ক্লাসটি তাত্ক্ষণিকভাবে চালিত হওয়ার সাথে সাথে জাভাস্ক্রিপ্ট ইঞ্জিন দ্বারা কনস্ট্রাক্টর কলগুলি করেন (অ্যাঙ্গুলার দ্বারা এনজিওএনইনিট কল করার আগে) টাইপস্ক্রিপ্ট আমাদের কনস্ট্রাক্টরের মধ্যে নির্ভরশীলতার ধরণ নির্ধারণ করতে এবং শেষ পর্যন্ত বলে দেয় কৌণিক আমরা সেই নির্দিষ্ট উপাদানটিতে কী ধরনের নির্ভরতা ব্যবহার করতে চাই।
কনস্ট্রাক্টর () উপাদান উপাদান চক্রের ডিফল্ট পদ্ধতি এবং নির্ভরতা ইনজেকশনের জন্য ব্যবহৃত হয়। কনস্ট্রাক্টর একটি টাইপস্ক্রিপ্ট বৈশিষ্ট্য।
কনজিস্ট্রাক্টরের পরে ngOnInit () বলা হয় এবং এনজিওএনইনিটকে প্রথমে এনজিওনচেনিজের পরে ডাকা হয়।
অর্থাৎ,
কনস্ট্রাক্টর () -->এনজিওনচেঞ্জস () -->এনজিওইনিট ()
উপরে উল্লিখিত হিসাবে ngOnChanges()
বলা হয় যখন একটি ইনপুট বা আউটপুট বাইন্ডিং মান পরিবর্তন হয়।
দুটি পদ্ধতিরই আলাদা লক্ষ্য / দায়িত্ব রয়েছে। কনস্ট্রাক্টরের কাজ (যা একটি ভাষা সমর্থিত বৈশিষ্ট্য) তা উপস্থাপনের আগমনকারীকে নিশ্চিত করেছে তা নিশ্চিত করা। অন্যথায় সদস্যদের সঠিক মান প্রদান করে উদাহরণটি বৈধ কিনা তা নিশ্চিত করার জন্য বলা হয়েছে। 'সঠিক' অর্থ কী তা সিদ্ধান্ত নেওয়া বিকাশকারীদের উপর নির্ভর করে।
অনআইনিট () পদ্ধতির কাজ (যা একটি কৌণিক ধারণা) হ'ল একটি সঠিক অবজেক্টের (উপস্থাপনার অদ্বিতীয়) পদ্ধতিতে প্রার্থনার অনুমতি দেওয়া। প্রতিটি পদ্ধতিটি ঘুরে এই বিষয়টি নিশ্চিত করা উচিত যে পদ্ধতিটি শেষ হয়ে গেলে প্রতিনিধিত্বকারী অদলবদলের হাত ধরে।
কনস্ট্রাক্টরটি 'সঠিক' অবজেক্ট তৈরি করতে ব্যবহার করা উচিত, অননিট পদ্ধতি আপনাকে একটি সুস্পষ্ট সংজ্ঞায়িত পদ্ধতিতে পদ্ধতি কলগুলি আহ্বান করার সুযোগ দেয়।
কনস্ট্রাক্টর: ES6 ক্লাসে কনস্ট্রাক্টর পদ্ধতি (বা এই ক্ষেত্রে টাইপস্ক্রিপ্ট) একটি কৌনিক বৈশিষ্ট্যের পরিবর্তে নিজেই একটি শ্রেণীর বৈশিষ্ট্য। কনস্ট্রাক্টরটি যখন আহ্বান করা হয় তখন এটি কৌণিক নিয়ন্ত্রণের বাইরে থাকে, যার অর্থ দাঁড়ায় যে কৌণিকটি উপাদানটি আরম্ভ করার পরে এটি আপনাকে জানাতে উপযুক্ত হুক নয়। জাভাস্ক্রিপ্ট ইঞ্জিন কনস্ট্রাক্টরকে কল করে, সরাসরি কৌণিক নয়। এজন্যই এনজিওইনিট (এবং অ্যাঙ্গুলারজেএস-এ I অননিট) লাইফসাইক্ল হুক তৈরি করা হয়েছিল। এটি মাথায় রেখে, কনস্ট্রাক্টর ব্যবহারের জন্য উপযুক্ত দৃশ্যাবলী রয়েছে। এটি হ'ল যখন আমরা নির্ভরতা ইনজেকশনটি ব্যবহার করতে চাই - মূলত উপাদানটিতে "ওয়্যারিং আপ" নির্ভরতা।
যেহেতু কন্সট্রাক্টরটি জাভাস্ক্রিপ্ট ইঞ্জিন দ্বারা সূচনা করা হয়েছে, এবং টাইপস্ক্রিপ্ট আমাদের কোনও নির্দিষ্ট সম্পত্তির বিরুদ্ধে ম্যাপ করার জন্য কী নির্ভরশীলতাগুলি অ্যাঙ্গুলারকে বলতে দেয়।
এনজিওইনিট হ'ল বিশুদ্ধরূপে আমাদের সিগন্যাল দেওয়ার জন্য যে কৌণিক উপাদানটি আরম্ভ করার কাজ শেষ করেছে।
এই পর্বে এমন বৈশিষ্ট্যগুলির বিরুদ্ধে পরিবর্তন সনাক্তকরণের প্রথম পাস অন্তর্ভুক্ত রয়েছে যা আমরা নিজেই উপাদানটিকে আবদ্ধ করতে পারি - যেমন একটি @ ইনপুট () ডেকরেটার ব্যবহার করে।
এই কারণে, @ ইনপুট () বৈশিষ্ট্যগুলি এনজিওআইনিটের ভিতরে উপলব্ধ, তবে নকশার দ্বারা নির্মাতার অভ্যন্তরে অপরিবর্তিত
কনস্ট্রাক্টরটি প্রথম, এবং এটি কখনও কখনও ঘটে যখন @ ইনপুট ডেটা শূন্য হয়! সুতরাং আমরা পরিষেবাগুলি ঘোষণা করার জন্য কনস্ট্রাক্টর ব্যবহার করি এবং পরে এনজিওইনাইট ঘটে happens ঠিকাদারের জন্য উদাহরণ:
constructor(translate: TranslateService, private oauthService: OAuthService) {
translate.setDefaultLang('En');
translate.use('En');}
অন আইনের জন্য উদাহরণ:
ngOnInit() {
this.items = [
{ label: 'A', icon: 'fa fa-home', routerLink: ['/'] },
{ label: 'B', icon: 'fa fa-home', routerLink: ['/'] }]
}
আমি মনে করি যে উইনফোর্মে অনিটটি ইনিশিয়াল কম্পোনেন্টগুলির মতো ()।
কৌণিক জীবন-চক্রের মধ্যে
1) কৌণিক ইনজেক্টর কনস্ট্রাক্টর প্যারামিটার (গুলি) এবং তাত্ক্ষণিক ক্লাস সনাক্ত করে।
2) পরবর্তী কৌনিক কল জীবনচক্র
ngOnChanges -> নির্দেশ পরামিতি বাঁধাই কল।
ngOnInit -> কৌনিক রেন্ডারিং শুরু করুন ...
কৌণিক জীবনচক্রের স্থিতি সহ অন্যান্য পদ্ধতিকে কল করুন।
constructor
যখন কৌণিক "instanciates / নির্মান" কম্পোনেন্ট বলা হয়। ngOnInit
পদ্ধতি হুক যা উপাদান জীবনচক্র আরম্ভের অংশ প্রতিনিধিত্ব করে। একটি ভাল অনুশীলন হ'ল এটি কেবল পরিষেবা ইনজেকশনের জন্য ব্যবহার করা :
constructor(private
service1: Service1,
service2: Service2
){};
এটি সম্ভব হলেও, আপনার ভিতরে কিছু "কাজ" করা উচিত নয়। যদি আপনি এমন কিছু ক্রিয়া চালু করতে চান যা "প্রাথমিককরণ" উপাদানটিতে ঘটে থাকে, ব্যবহার করুন ngOnInit
:
ngOnInit(){
service1.someWork();
};
তদতিরিক্ত, কোনও ক্রিয়াকলাপ যা ইনপুট বৈশিষ্ট্যগুলিকে জড়িত করে , পিতামাত্ত্বিক উপাদান থেকে আসা, সেগুলি ঠিকাদারের মধ্যে করা যায় না। সেগুলি ngOnInit
পদ্ধতিতে বা অন্য কোনও হুক স্থাপন করা উচিত । এটি ভিউ ( ডিওএম ) সম্পর্কিত উপাদানগুলির ক্ষেত্রে একই, উদাহরণস্বরূপ, ভিউচাইল্ড উপাদান :
@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()
নির্ভরতা ইনজেকশন করতে ব্যবহৃত হয়।
ngOnInit()
, ngOnChanges()
এবং ngOnDestroy()
ইত্যাদি লাইফাইসাইকাল পদ্ধতি। ngOnChanges()
এর আগে ডাকা হবে প্রথমে ngOnInit()
, যখন সীমাবদ্ধ সম্পত্তির মান পরিবর্তন হয়, কোনও পরিবর্তন না হলে এটি কল করা হবে না। ngOnDestroy()
উপাদানটি সরানো হলে তাকে বলা হয়। এটি ব্যবহার করতে, শ্রেণি দ্বারা সম্পাদনা OnDestroy
করা দরকার implement
।
আমি উত্তরটি পেয়েছি এবং আমি এটি ইংরেজী অনুবাদ করার চেষ্টা করেছি: প্রযুক্তিগত সাক্ষাত্কারেও এই প্রশ্নটি এখনও উত্থাপিত হয়েছিল। আসলে, উভয়ের মধ্যে একটি বড় সাদৃশ্য রয়েছে, তবে কিছু পার্থক্যও রয়েছে।
নির্মাতা ECMAScript এর অংশ। অন্যদিকে এনজিওইনাইট () হ'ল কৌণিক ধারণা।
আমরা Angular ব্যবহার না করেও আমরা সমস্ত ক্লাসে কনস্ট্রাক্টরকে কল করতে পারি
লাইফসাইকেল: এনজিওএনইন্টের আগে কনস্ট্রাক্টরকে ডাকা হয় ()
কনস্ট্রাক্টরে আমরা এইচটিএমএল উপাদানগুলি কল করতে পারি না। তবে, এনজিওইনাইটে () আমরা পারি।
সাধারণত, পরিষেবাগুলির কলগুলি এনজিওইনাইট () এবং কনস্ট্রাক্টরে নয়
সূত্র: http://www.angular-tuto.com/Angular/Comp घटक# Diff
নির্মাতা
কনস্ট্রাক্টর ফাংশন প্রতিটি ক্লাসের সাথে আসে, কনস্ট্রাক্টরগুলি অ্যাঙ্গুলারের সাথে সুনির্দিষ্ট নয় তবে অবজেক্ট ওরিয়েন্টেড ডিজাইন থেকে প্রাপ্ত ধারণাগুলি। কনস্ট্রাক্টর উপাদান উপাদানটির একটি উদাহরণ তৈরি করে।
OnInit
ngOnInit
ফাংশন একটি কৌণিক উপাদান এর জীবনচক্র পদ্ধতি এক। কৌণিক উপাদানগুলিতে জীবনচক্রের পদ্ধতিগুলি (বা হুকস) আপনাকে কোনও উপাদানটির জীবনের বিভিন্ন পর্যায়ে কোডের একটি অংশ চালানোর অনুমতি দেয়। কনস্ট্রাক্টর পদ্ধতির বিপরীতে, ngOnInit
পদ্ধতিটি একটি কৌণিক ইন্টারফেস ( OnInit
) থেকে আসে যা এই পদ্ধতিটি ব্যবহার করার জন্য উপাদানটি প্রয়োগ করতে হবে। ngOnInit
পদ্ধতি খুব শীঘ্রই নামক পর কম্পোনেন্ট নির্মিত হয়।
বর্গ তাত্ক্ষণিক হয় যখন কনস্ট্রাক্টর কার্যকর করা হয়। এর কৌণিকের সাথে কিছুই করার নেই। এটি জাভাস্ক্রিপ্টের বৈশিষ্ট্য এবং এঙ্গুলারের উপর এটির নিয়ন্ত্রণ নেই
এনজিওএনআইনিটটি কৌণিক নির্দিষ্ট এবং যখন কৌনিকটি তার সমস্ত ইনপুট বৈশিষ্ট্য সহ উপাদানটি আরম্ভ করে তখন তাকে বলা হয়
@ ইনপুট বৈশিষ্ট্যগুলি ngOnInit লাইফেসাইকেল হুকের অধীনে উপলব্ধ। এটি আপনাকে ব্যাক-এন্ড সার্ভার থেকে ডেটা প্রাপ্ত করা ইত্যাদির মতো কিছু সূচনা করার কাজটি ভিউতে প্রদর্শন করতে সহায়তা করবে
@ ইনপুট বৈশিষ্ট্যগুলি কনস্ট্রাক্টরের অভ্যন্তরে অপরিবর্তিত হিসাবে প্রদর্শিত হয়
রচয়িতা একটি ফাংশন যখন কম্পোনেন্ট (অথবা অন্যান্য বর্গ) নির্মিত হয় মৃত্যুদন্ড কার্যকর করা হয়।
এনজিওইনিট হ'ল একটি উপাদান যা জীবন-চক্র পদ্ধতি গোষ্ঠীগুলির সাথে সম্পর্কিত এবং সেগুলি আমাদের উপাদানগুলির একটি বিচ্ছিন্ন মুহুর্তে মৃত্যুদন্ড কার্যকর করা হয় (এজন্যই জীবন চক্রের নাম দেওয়া হয়)। এখানে তাদের সকলের একটি তালিকা রয়েছে: