आइवी का एक अध्ययन, नया कोणीय संकलक

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

जब उरी ने सुना कि आइवरी नामक एंगुलर कंपाइलर का एक नया संस्करण जारी किया गया था, तो वह तुरंत एक करीब देखना चाहता था और यह पता लगा रहा था कि पुराने संस्करण की तुलना में उसमें क्या बदलाव आया है। यहां, पहले की तरह, संकलनकर्ता को कोणीय द्वारा बनाए गए टेम्पलेट्स और घटकों को प्राप्त होता है, जो नियमित HTML और जावास्क्रिप्ट कोड में परिवर्तित होते हैं जो क्रोम और अन्य ब्राउज़रों के लिए समझ में आता है।



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

यह समझना कि संकलक कैसे काम करता है, अपने आप में दिलचस्प है (कम से कम सामग्री के लेखक की उम्मीद है तो), लेकिन यह भी कोणीय के आंतरिक तंत्र को बेहतर ढंग से समझने में मदद करता है। यह "कोणीय-सोच" के कौशल में सुधार की ओर जाता है, जो बदले में, आपको वेब विकास के लिए इस रूपरेखा का अधिक प्रभावी ढंग से उपयोग करने की अनुमति देता है।

वैसे, क्या आप जानते हैं कि नए कंपाइलर का नाम आइवी क्यों रखा गया था? तथ्य यह है कि यह शब्द "IV" अक्षरों के संयोजन जैसा लगता है, जोर से पढ़ें, जो संख्या 4 का प्रतिनिधित्व करता है, जो रोमन अंकों में लिखा गया है। "4" कोणीय संकलक की चौथी पीढ़ी है।

आइवी आवेदन

आइवी अभी भी गहन विकास की प्रक्रिया में है, इस प्रक्रिया को यहां देखा जा सकता है। हालांकि कंपाइलर स्वयं अभी तक मुकाबला उपयोग के लिए उपयुक्त नहीं है, लेकिन रेंडरर वी 3 का अमूर्त उपयोग, जो पहले से ही काफी कार्यात्मक है और कोणीय 6.x के साथ आता है।

हालांकि आइवी अभी भी काफी तैयार नहीं है, फिर भी हम उसके काम के परिणामों पर एक नज़र डाल सकते हैं। यह कैसे करना है? एक नया कोणीय प्रोजेक्ट बनाकर:

ng new ivy-internals 

उसके बाद, आपको नए प्रोजेक्ट फ़ोल्डर में स्थित tsconfig.json फ़ाइल में निम्न पंक्तियाँ जोड़कर आइवी को सक्षम करना होगा:

 "angularCompilerOptions": { "enableIvy": true } 

और अंत में, हम नए बनाए गए प्रोजेक्ट फ़ोल्डर में ngc कमांड निष्पादित करके कंपाइलर शुरू करते हैं:

 node_modules/.bin/ngc 

वह सब है। अब आप dist/out-tsc में स्थित उत्पन्न कोड की जांच कर सकते हैं। उदाहरण के लिए, AppComponent टेम्पलेट के निम्नलिखित टुकड़े पर एक नज़र डालें:

 <div style="text-align:center"> <h1>   Welcome to {{ title }}! </h1> <img width="300" alt="Angular Logo" src="…"> </div> 

यहां कुछ लिंक दिए गए हैं जो आपको शुरू करने में मदद करते हैं:

इस टेम्प्लेट के लिए जेनरेट किया गया कोड dist/out-tsc/src/app/app.component.js पाया जा सकता है:

 i0.ɵE(0, "div", _c0); i0.ɵE(1, "h1"); i0.ɵT(2); i0.ɵe(); i0.ɵE(3, "img", _c1); i0.ɵe(); i0.ɵe(); i0.ɵE(4, "h2"); i0.ɵT(5, "Here are some links to help you start: "); i0.ɵe(); 

यह इस तरह के जावास्क्रिप्ट कोड में है कि आइवी घटक टेम्पलेट को बदल देता है। यहां बताया गया है कि कंपाइलर के पिछले संस्करण में भी यही काम किया गया था:


कोणीय संकलक के पिछले संस्करण द्वारा निर्मित कोड

ऐसा अहसास होता है कि आइवी जनरेट करने वाला कोड ज्यादा सरल है। आप घटक टेम्पलेट के साथ प्रयोग कर सकते हैं (यह src/app/app.component.html ), इसे फिर से संकलित करें और देखें कि इसमें किए गए परिवर्तन उत्पन्न कोड को कैसे प्रभावित करेंगे।

पार्स उत्पन्न कोड

आइए जनरेट कोड को पार्स करने की कोशिश करें और देखें कि यह किस क्रिया को करता है। उदाहरण के लिए, आइए i0.ɵE और i0.ɵT जैसे कॉल के अर्थ के बारे में एक प्रश्न के उत्तर की i0.ɵT

यदि आप जनरेट की गई फ़ाइल की शुरुआत को देखते हैं, तो हमें निम्न अभिव्यक्ति मिलेगी:

 var i0 = require("@angular/core"); 

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

तो, ये सभी विधियां एंगुलर द्वारा निर्यात किए गए निजी एपीआई हैं। वीएस कोड में परियोजना को खोलकर और टूलटिप्स का विश्लेषण करके उनकी कार्यक्षमता का पता लगाना आसान है:


वी.एस. कोड में कोड विश्लेषण

भले ही एक जावास्क्रिप्ट फ़ाइल यहां पार्स की गई हो, लेकिन वीएस कोड टाइपस्क्रिप्ट से कॉल हस्ताक्षर की पहचान करने और किसी विशेष विधि के लिए प्रलेखन खोजने के लिए टाइप जानकारी का उपयोग करता है। यदि, विधि नाम का चयन किया है, तो संयोजन Ctrl + क्लिक (मैक पर Cmd + क्लिक) का उपयोग करें, हमें पता चलता है कि इस पद्धति का वास्तविक नाम elementStart ।

इस तकनीक ने यह पता लगाना संभव कर दिया है कि विधि नाम text , विधि नाम ɵe है। इस ज्ञान के साथ, हम उत्पन्न कोड को "ट्रांसलेट" कर सकते हैं, इसे ऐसी चीज़ में बदल सकते हैं जो पढ़ने में अधिक सुविधाजनक होगी। यहाँ इस तरह के "अनुवाद" का एक छोटा सा अंश है:

 var core = require("angular/core"); //... core.elementStart(0, "div", _c0); core.elementStart(1, "h1"); core.text(2); core. (); core.elementStart(3, "img", _c1); core.elementEnd(); core.elementEnd(); core.elementStart(4, "h2"); core.text(5, "Here are some links to help you start: "); core.elementEnd(); 

और, जैसा कि पहले ही उल्लेख किया गया है, यह कोड HTML टेम्प्लेट से निम्नलिखित पाठ से मेल खाता है:

 <div style="text-align:center"> <h1>   Welcome to {{ title }}! </h1> <img width="300" alt="Angular Logo" src="…"> </div> 

यहां कुछ लिंक दिए गए हैं जो आपको शुरू करने में मदद करते हैं:

इन सभी का विश्लेषण करने के बाद, निम्नलिखित पर ध्यान देना आसान है:

• प्रत्येक खोलने वाले HTML टैग में core.elementStart() कॉल होता है।
• समापन टैग core.elementEnd() लिए कॉल के अनुरूप हैं।
• पाठ नोड्स core.text() को कॉल करने के लिए अनुरूप हैं।

elementStart और text elementStart का पहला तर्क एक संख्या है जिसका मूल्य प्रत्येक कॉल के साथ बढ़ता है। यह संभवतः किसी सरणी में एक इंडेक्स का प्रतिनिधित्व करता है जिसमें एंगुलर स्टोर बनाए गए तत्वों से लिंक करता है।

तीसरा तर्क elementStart विधि से भी दिया गया है। उपरोक्त सामग्रियों का अध्ययन करने के बाद, हम यह निष्कर्ष निकाल सकते हैं कि तर्क वैकल्पिक है और DOM नोड के लिए विशेषताओं की एक सूची है। आप इसे _c0 के मान को _c0 और यह पता लगा सकते हैं कि इसमें div तत्व के लिए विशेषताओं और उनके मूल्यों की सूची है:

 var _c0 = ["style", "text-align:center"]; 

NgComponentDef नोट

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

घर का बना आइवी

अब जब हम सामान्य शब्दों में, यह समझते हैं कि उत्पन्न कोड कैसा दिखता है, हम स्क्रैच से, अपने स्वयं के घटक को उसी RendererV3 API का उपयोग करके बनाने का प्रयास कर सकते हैं, जिसे Ivy उपयोग करता है।

हम जो कोड बनाने जा रहे हैं, वह उस कोड के समान होगा जो कंपाइलर उत्पादन करता है, लेकिन हम इसे बनाएंगे ताकि इसे पढ़ना आसान हो।

आइए एक सरल घटक लिखकर शुरू करें, और फिर इसे आइवी द्वारा प्राप्त किए गए कोड के समान मैन्युअल रूप से अनुवाद करें:

 import { Component } from '@angular/core'; @Component({ selector: 'manual-component', template: '<h2><font color="#3AC1EF">Hello, Component</font></h2>', }) export class ManualComponent { } 

कंपाइलर @component डेकोरेटर के इनपुट को इनपुट के रूप में लेता है, निर्देश बनाता है, और फिर यह सभी घटक वर्ग की स्थिर संपत्ति के रूप में व्यवस्थित करता है। इसलिए, आइवी की गतिविधि का अनुकरण करने के लिए, हम @component डेकोरेटर को @component और इसे स्थिर ngComponent संपत्ति से प्रतिस्थापित करते हैं:

 import * as core from '@angular/core'; export class ManualComponent { static ngComponentDef = core.ɵdefineComponent({   type: ManualComponent,   selectors: [['manual-component']],   factory: () => new ManualComponent(),   template: (rf: core.ɵRenderFlags, ctx: ManualComponent) => {     //       }, }); } 

हम ɵdefineComponent कॉल करके संकलित घटक के लिए मेटाडेटा को परिभाषित ɵdefineComponent । मेटाडेटा में घटक का प्रकार (निर्भरता को लागू करने के लिए पहले इस्तेमाल किया गया), सीएसएस चयनकर्ता (या चयनकर्ता) शामिल हैं जो इस घटक को कॉल करेंगे (हमारे मामले में, manual-component HTML टेम्पलेट में घटक का नाम है), नया उदाहरण देता है कि कारखाना घटक, और फिर फ़ंक्शन जो घटक के लिए टेम्पलेट को परिभाषित करता है। यह टेम्पलेट घटक के दृश्य प्रतिनिधित्व को प्रदर्शित करता है और घटक के गुणों में परिवर्तन होने पर इसे अपडेट करता है। इस टेम्प्लेट को बनाने के लिए, हम उन विधियों का उपयोग करेंगे जो हमने ऊपर पाए हैं: , ɵe , ɵe और ɵT ।

     template: (rf: core.ɵRenderFlags, ctx: ManualComponent) => {     core.ɵE(0, 'h2');                 //    h2     core.ɵT(1, 'Hello, Component');   //       core.ɵe();                        //    h2   }, 

इस स्तर पर, हम अपने टेम्प्लेट फ़ंक्शन द्वारा प्रदान किए गए rf या ctf मापदंडों का उपयोग नहीं करते हैं। हम उनके पास वापस आएंगे। लेकिन पहले, आइए देखें कि स्क्रीन पर हमारे पहले घर-निर्मित घटक को कैसे प्रदर्शित किया जाए।

पहला आवेदन

स्क्रीन पर घटकों को प्रदर्शित करने के लिए, कोणीय ɵrenderComponent नामक एक विधि का निर्यात करता है। आपको बस यह जांचने की ज़रूरत है कि index.html फ़ाइल में तत्व चयनकर्ता, <manual-component> अनुरूप एक HTML टैग है, और फिर फ़ाइल के अंत में निम्न जोड़ें:

 core.ɵrenderComponent(ManualComponent); 

वह सब है। अब हमारे पास एक न्यूनतम स्व-निर्मित कोणीय अनुप्रयोग है जिसमें कोड की केवल 16 लाइनें हैं। आप StackBlitz पर तैयार आवेदन के साथ प्रयोग कर सकते हैं।

पता लगाने का तंत्र बदलें

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

घटक को बदलें ताकि उपयोगकर्ता स्वागत पाठ को अनुकूलित कर सके। यही है, घटक हमेशा Hello, Component प्रदर्शित करने के घटक के बजाय, हम उपयोगकर्ता को Hello बाद आने वाले पाठ के हिस्से को बदलने देने जा रहे हैं।

हम name गुण और घटक वर्ग के लिए इस संपत्ति के मूल्य को अद्यतन करने के लिए एक विधि को जोड़कर शुरू करते हैं:

 export class ManualComponent { name = 'Component'; updateName(newName: string) {   this.name = newName; } // ... } 

हालांकि यह सब कुछ विशेष रूप से प्रभावशाली नहीं दिखता है, लेकिन सबसे दिलचस्प आगे है।

अगला, हम टेम्पलेट फ़ंक्शन को संपादित करेंगे, ताकि अपरिवर्तनीय पाठ के बजाय, यह name संपत्ति की सामग्री प्रदर्शित करता है:

 template: (rf: core.ɵRenderFlags, ctx: ManualComponent) => { if (rf & 1) {   // :        core.ɵE(0, 'h2');   core.ɵT(1, 'Hello, ');   core.ɵT(2);   // <--   name   core.ɵe(); } if (rf & 2) {   // :       core.ɵt(2, ctx.name);  // ctx -     } }, 

आपने देखा हो सकता है कि हम टेम्पलेट निर्देशों को लपेटते हैं if rf मान की जाँच करें। इस पैरामीटर का उपयोग यह दिखाने के लिए किया जाता है कि क्या घटक को पहली बार बनाया जा रहा है (कम से कम महत्वपूर्ण बिट सेट किया जाएगा), या हमें परिवर्तनों का पता लगाने की प्रक्रिया में गतिशील सामग्री को अपडेट करने की आवश्यकता है (यह if दूसरा उद्देश्य है if )।

इसलिए, जब पहली बार घटक प्रदर्शित होता है, तो हम सभी तत्व बनाते हैं, और फिर, जब परिवर्तनों का पता लगाया जाता है, तो हम केवल वही अपडेट करते हैं जो बदल सकता है। इसके लिए ɵt आंतरिक विधि जिम्मेदार है (नोट लोअरकेस लेटर t ), जो textBinding निर्यात किए गए textBinding फ़ंक्शन से मेल खाती है:


फंक्शन टेक्स्टबाइंडिंग

तो, पहला पैरामीटर अद्यतन किए जाने वाले तत्व का सूचकांक है, दूसरा मान है। इस स्थिति में, हम कमांड core.ɵT(2); साथ इंडेक्स 2 के साथ एक खाली पाठ तत्व बनाते हैं। core.ɵT(2); । यह name लिए प्लेसहोल्डर के रूप में कार्य करता है। हम इसे कमांड core.ɵt(2, ctx.name); साथ अपडेट करते हैं core.ɵt(2, ctx.name); संबंधित चर में परिवर्तन का पता लगाने पर।

फिलहाल, इस घटक का आउटपुट अभी भी पाठ को प्रदर्शित करेगा Hello, Component , हालांकि हम name संपत्ति के मूल्य को बदल सकते हैं, जिससे स्क्रीन पर पाठ में बदलाव होगा।

एप्लिकेशन को वास्तव में इंटरैक्टिव बनने के लिए, हम यहां एक इवेंट श्रोता के साथ एक डेटा एंट्री फ़ील्ड updateName() जो घटक विधि को updateName() :

 template: (rf: core.ɵRenderFlags, ctx: ManualComponent) => { if (rf & 1) {   core.ɵE(0, 'h2');   core.ɵT(1, 'Hello, ');   core.ɵT(2);   core.ɵe();   core.ɵT(3, 'Your name: ');   core.ɵE(4, 'input');   core.ɵL('input', $event => ctx.updateName($event.target.value));   core.ɵe(); } // ... }, 

इवेंट बाइंडिंग लाइन core.ɵL('input', $event => ctx.updateName($event.target.value)); । अर्थात्, ɵL विधि घोषित श्रोताओं में से सबसे ɵL के लिए ईवेंट श्रोता को सेट करने के लिए जिम्मेदार है। पहला तर्क ईवेंट का नाम है (इस मामले में, input वह ईवेंट है जिसे <input> तत्व परिवर्तन की सामग्री के दौरान उठाया जाता है), दूसरा तर्क कॉलबैक है। यह कॉलबैक ईवेंट डेटा को एक तर्क के रूप में स्वीकार करता है। फिर हम घटना के लक्ष्य तत्व से मौजूदा मूल्य को निकालते हैं, अर्थात् <input> तत्व से, और घटक में फ़ंक्शन को पास करते हैं।

उपरोक्त कोड एक टेम्पलेट में निम्नलिखित HTML लिखने के बराबर है:

 Your name: <input (input)="updateName($event.target.value)" /> 

अब आप <input> तत्व की सामग्री को संपादित कर सकते हैं और यह देख सकते हैं कि घटक में पाठ कैसे बदलता है। हालांकि, घटक लोड होने पर इनपुट फ़ील्ड आबाद नहीं होती है। इस तरह से काम करने के लिए सब कुछ के लिए, आपको टेम्पलेट फ़ंक्शन कोड में एक और निर्देश जोड़ने की आवश्यकता है, जब एक परिवर्तन का पता लगाया जाता है, तो निष्पादित किया जाता है:

 template: (rf: core.ɵRenderFlags, ctx: ManualComponent) => { if (rf & 1) { ... } if (rf & 2) {   core.ɵt(2, ctx.name);   core.ɵp(4, 'value', ctx.name); } } 

यहां हम रेंडरिंग सिस्टम का एक और बिल्ट-इन मेथड इस्तेमाल करते हैं, ɵp , जो किसी दिए गए इंडेक्स के साथ एक एलिमेंट की प्रॉपर्टी को अपडेट करता है। इस स्थिति में, इंडेक्स 4 को विधि को दिया जाता है, जो कि input तत्व को सौंपा गया इंडेक्स है, और हम इस तत्व की value प्रॉपर्टी में ctx.name वैल्यू डालने का तरीका ctx.name हैं।

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

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

* NgIf और * ngFor ब्लॉकों के बारे में

इससे पहले कि हम आइवी अध्ययन समाप्त करें, आइए एक और दिलचस्प विषय देखें। अर्थात्, आइए इस बारे में बात करते हैं कि कंपाइलर सबपैटर्न के साथ कैसे काम करता है। ये वे पैटर्न हैं जो *ngIf या *ngFor लिए उपयोग किए जाते हैं। उन्हें एक विशेष तरीके से संसाधित किया जाता है। आइए देखें कि हमारे होममेड टेम्पलेट कोड में *ngIf का उपयोग कैसे करें।

सबसे पहले आपको npm पैकेज @angular/common स्थापित करने की आवश्यकता है - यह वह जगह है जहां *ngIf । अगला, आपको इस पैकेज से निर्देश आयात करने की आवश्यकता है:

 import { NgIf } from '@angular/common'; 

अब, टेम्पलेट में NgIf का उपयोग करने में सक्षम होने के लिए, आपको इसे कुछ मेटाडेटा के साथ प्रदान करने की आवश्यकता है, क्योंकि @angular/common मॉड्यूल को आइवी के साथ संकलित नहीं किया गया था (कम से कम सामग्री लिखते समय, और भविष्य में यह संभवतः इससे बदल जाएगा। ngcc की शुरूआत )।

हम ɵdefineDirective विधि का उपयोग करने जा रहे हैं, जो कि परिचित ɵdefineComponent विधि से संबंधित है। यह निर्देशों के लिए मेटाडेटा को परिभाषित करता है:

 (NgIf as any).ngDirectiveDef = core.ɵdefineDirective({ type: NgIf, selectors: [['', 'ngIf', '']], factory: () => new NgIf(core.ɵinjectViewContainerRef(), core.ɵinjectTemplateRef()), inputs: {ngIf: 'ngIf', ngIfThen: 'ngIfThen', ngIfElse: 'ngIfElse'} }); 

मुझे यह परिभाषा ngFor सोर्स कोड में मिली, साथ ही ngFor के साथ। अब जब हमने आईवी में उपयोग के लिए NgIf तैयार किया है, तो हम घटक के लिए निर्देशों की सूची में निम्नलिखित जोड़ सकते हैं:

 static ngComponentDef = core.ɵdefineComponent({ directives: [NgIf], // ... }); 

अगला, हम केवल *ngIf द्वारा *ngIf हुए विभाजन के लिए उपपट्ट को परिभाषित करते हैं।

मान लीजिए आपको एक छवि प्रदर्शित करने की आवश्यकता है। चलिए इस फंक्शन के लिए एक नया फंक्शन टेम्पलेट फंक्शन के अंदर सेट करते हैं:

 function ifTemplate(rf: core.ɵRenderFlags, ctx: ManualComponent) { if (rf & 1) {   core.ɵE(0, 'div');   core.ɵE(1, 'img', ['src', 'https://pbs.twimg.com/tweet_video_thumb/C80o289UQAAKIqp.jpg']);   core.ɵe(); } } 

यह टेम्प्लेट फ़ंक्शन हमारे द्वारा पहले से लिखे गए से अलग नहीं है। यह एक div तत्व के अंदर img तत्व बनाने के लिए समान कंस्ट्रक्शन का उपयोग करता है।

और अंत में, हम घटक टेम्पलेट में ngIf निर्देश जोड़कर इसे एक साथ रख सकते हैं:

 template: (rf: core.ɵRenderFlags, ctx: ManualComponent) => { if (rf & 1) {   // ...   core.ɵC(5, ifTemplate, null, ['ngIf']); } if (rf & 2) {   // ...   core.ɵp(5, 'ngIf', (ctx.name === 'Igor')); } function ifTemplate(rf: core.ɵRenderFlags, ctx: ManualComponent) {   // ... } }, 

कोड की शुरुआत में नई विधि पर कॉल को नोट करें ( core.ɵC(5, ifTemplate, null, ['ngIf']); )। यह एक नया कंटेनर तत्व घोषित करता है, यानी एक ऐसा तत्व जिसमें एक टेम्पलेट होता है। पहला तर्क तत्व का सूचकांक है, हम पहले ही ऐसे सूचकांक देख चुके हैं। दूसरा तर्क है सबपैटर्न फ़ंक्शन जिसे हमने अभी परिभाषित किया है। यह कंटेनर तत्व के लिए एक टेम्पलेट के रूप में उपयोग किया जाएगा। तीसरा पैरामीटर तत्व के लिए टैग नाम है, जिसका यहां कोई मतलब नहीं है, और अंत में, इस तत्व से जुड़े निर्देशों और विशेषताओं की एक सूची है। यह वह जगह है जहाँ ngIf अंदर आता ngIf ।

लाइन में core.ɵp(5, 'ngIf', (ctx.name === 'Igor')); तत्व की स्थिति को तार्किक अभिव्यक्ति ctx.name === 'Igor' के मूल्य में ngIf विशेषता को बांधकर अद्यतन किया जाता है। यह देखने के लिए जांचता है कि क्या घटक की name संपत्ति Igor बराबर है।

उपरोक्त कोड निम्न HTML कोड के बराबर है:

 <div *ngIf="name === 'Igor'"> <img align="center" src="..."> </div> 

यहां यह ध्यान दिया जा सकता है कि नया संकलक सबसे कॉम्पैक्ट कोड का उत्पादन नहीं करता है, लेकिन यह अब जो है, उसकी तुलना में यह इतना बुरा नहीं है।

आप यहां एक नए उदाहरण के साथ प्रयोग कर सकते हैं । कार्रवाई में NgIf अनुभाग देखने के लिए, Your name क्षेत्र में Igor नाम दर्ज करें।

परिणाम

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

यहां , यहां और यहां - तीन सामग्री जिसमें आप आइवी के बारे में उपयोगी जानकारी पा सकते हैं। और यहाँ Render3 के लिए सोर्स कोड है।

प्रिय पाठकों! आप आइवी की नई विशेषताओं के बारे में कैसा महसूस करते हैं?