कोणीय में Agular Components

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

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

डेटा-अज्ञेय घटक

मान लें कि हम ड्रॉप-डाउन मेनू के साथ एक बटन बनाते हैं। इसका API क्या होगा? बेशक, उसे इनपुट के रूप में कुछ वस्तुओं की आवश्यकता है - मेनू आइटम की एक सरणी। सबसे अधिक संभावना है, इंटरफ़ेस का पहला संस्करण इस तरह होगा:

interface MenuItem { readonly text: string; readonly onClick(): void; } 

बहुत जल्दी, disabled: boolean जोड़ देगा। फिर डिजाइनर आएंगे और आइकन के साथ एक मेनू तैयार करेंगे। और पड़ोसी परियोजना के लोग, वे दूसरी ओर आइकन बनाएंगे। और अब इंटरफ़ेस बढ़ रहा है, अधिक से अधिक विशेष मामलों को कवर करना आवश्यक है, और झंडे की बहुतायत से घटक संयुक्त राष्ट्र की सभा से मिलना शुरू होता है।

पीढ़ी बचाव में आती है। यदि आप घटक को व्यवस्थित करते हैं ताकि यह डेटा मॉडल के बारे में परवाह न करे, तो ये सभी समस्याएं गायब हो जाएंगी। एक क्लिक पर item.onClick पर कॉल करने के बजाय, मेनू केवल क्लिक किए गए आइटम को बाहर निकाल देगा। बाद में इसके साथ क्या करना है यह लाइब्रेरी उपयोगकर्ताओं के लिए एक कार्य है। भले ही वे एक ही item.onClick ।

एक disabled राज्य के मामले में, उदाहरण के लिए, विशेष हैंडलर का उपयोग करके समस्या का समाधान किया जाता है। disabledItemHandler: (item: T) => boolean इटहैंडलर विधि को घटक को पास किया जाता है disabledItemHandler: (item: T) => boolean , जिसके माध्यम से प्रत्येक आइटम चलाया जाता है। परिणाम कहता है कि क्या यह तत्व बंद है।

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

 interface ComboBoxItem { readonly text: string; readonly value: any; } 

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

जेनरिक और हैंडलर भी यहां मदद करेंगे। आइए हम फ़ंक्शन (item: T) => string कंपोनेंट को देते हैं। डिफ़ॉल्ट मान item => String(item) । इस प्रकार, आप उनमें toString() पद्धति को परिभाषित करके विकल्प के रूप में कक्षाओं का उपयोग भी कर सकते हैं। जैसा कि ऊपर उल्लेख किया गया है, न केवल स्ट्रिंग प्रतिनिधित्व द्वारा विकल्पों को फ़िल्टर करना आवश्यक है। हैंडलर का उपयोग करने के लिए भी यह एक अच्छा मामला है। आप एक फ़ंक्शन के साथ एक घटक प्रदान कर सकते हैं जो खोज स्ट्रिंग और इनपुट के रूप में एक तत्व प्राप्त करता है। यह boolean लौटाएगा - यह बताएगा कि आइटम अनुरोध के लिए उपयुक्त है या नहीं।

इंटरफ़ेस का उपयोग करने का एक और सामान्य उदाहरण एक अद्वितीय आईडी है, जो जावास्क्रिप्ट ऑब्जेक्ट्स की प्रतियों से मेल खाती है। जब हमें तुरंत फॉर्म मूल्य प्राप्त हुआ, और चयन के लिए विकल्प सर्वर से एक अलग अनुरोध में आए - उनके पास केवल वर्तमान तत्व की एक प्रति होगी। यह कार्य एक हैंडलर द्वारा संभाला जाता है जो इनपुट के रूप में दो तत्व प्राप्त करता है और उनकी समानता लौटाता है। डिफ़ॉल्ट तुलना सामान्य है === ।

टैब डिस्प्ले घटक, वास्तव में, यह जानने की आवश्यकता नहीं है कि टैब किस रूप में इसे पारित किया गया था: कम से कम पाठ के साथ, कम से कम अतिरिक्त क्षेत्रों के साथ एक वस्तु के साथ, यहां तक ​​कि कैसे। कार्यान्वयन के लिए प्रारूप का ज्ञान आवश्यक नहीं है, लेकिन कई एक विशिष्ट प्रारूप के लिए लिंक बनाते हैं। संबंधों की अनुपस्थिति का मतलब है कि घटकों को शोधन के दौरान टूटने वाले बदलावों की आवश्यकता नहीं होगी, उपयोगकर्ताओं को उनके लिए अपने डेटा को अनुकूलित करने के लिए मजबूर नहीं करेगा, और लेगो क्यूब्स जैसे एक दूसरे के साथ परमाणु घटकों के संयोजन की अनुमति देगा।

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

सूचियों में अवतार, विभिन्न रंग, चिह्न, अपठित संदेश की संख्या और बहुत कुछ हो सकता है।

ऐसा करने के लिए, घटकों को जेनरिक के समान तरीके से दिखना चाहिए।

डिजाइन-अज्ञेय घटक

कोणीय उपस्थिति को परिभाषित करने के लिए शक्तिशाली उपकरण प्रदान करता है।

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

मनमाना डेटा पानी की तरह है: उनके पास कोई रूप नहीं है, वे अपने आप में कुछ खास नहीं करते हैं। हमारा कार्य उनके लिए एक "पोत" सेट करने का अवसर प्रदान करना है। इस अर्थ में, उपस्थिति से अलग एक घटक का विकास निम्नानुसार है:

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

1. उपस्थिति को बदलने का सबसे सरल तरीका लाइन प्रक्षेप है। लेकिन मेनू आइटम प्रदर्शित करने के लिए एक अदृश्य रेखा उपयुक्त नहीं है, क्योंकि यह प्रत्येक आइटम के बारे में कुछ भी नहीं जानता है - और वे सभी समान दिखेंगे। एक स्थिर स्ट्रिंग संदर्भ से वंचित है । लेकिन विकल्पों की सूची खाली होने पर "कुछ भी नहीं मिला" पाठ सेट करने के लिए यह काफी उपयुक्त है।

   
   

    <div>{{content}}</div> 

   
   

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

   
   

    <div>{{content(context)}}</div> 

   
   

3. कोणीय *ngTemplateOutlet को *ngTemplateOutlet करने के *ngTemplateOutlet ng-template और *ngTemplateOutlet संरचनात्मक निर्देश प्रदान करता है। उनकी मदद से, हम HTML के एक टुकड़े को परिभाषित कर सकते हैं जो उम्मीद करता है कि कुछ डेटा इनपुट हो सकते हैं और इसे घटक को पास कर सकते हैं। वहां उसे एक विशिष्ट संदर्भ के साथ त्वरित किया जाएगा। हम मॉडल के बारे में चिंता किए बिना अपने तत्व पर इसे पारित करेंगे। अपनी वस्तुओं के लिए सही खाका खींचना हमारे घटक के उपभोक्ता-डेवलपर का कार्य है।

   
   

    <ng-container *ngTemplateOutlet="content; context: context"></ng-container> 

   
   

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

   
   

4. इस समस्या को हल करने वाले रूप को अनुकूलित करने का सबसे जटिल तरीका गतिशील घटक है। कोणीय में, *ngComponentOutlet निर्देश लंबे समय से उन्हें घोषित रूप से बनाने के लिए अस्तित्व में है। यह संदर्भ के हस्तांतरण की अनुमति नहीं देता है, लेकिन यह समस्या निर्भरता के कार्यान्वयन से हल हो जाती है। हम संदर्भ के लिए एक टोकन बना सकते हैं और इसे Injector जोड़ सकते हैं जिसके साथ घटक बनाया जाता है।

   
   

    <ng-container *ngComponentOutlet="content; injector: injector"></ng-container> 

   
   

   यह ध्यान देने योग्य है कि संदर्भ न केवल वह तत्व हो सकता है जिसे हम प्रदर्शित करना चाहते हैं, बल्कि यह भी कि वह किन परिस्थितियों में स्थित है:

   
   

    <ng-template let-item let-focused="focused"> <!-- ... --> </ng-template> 

   
   

   उदाहरण के लिए, किसी खाते की वापसी के मामले में, आइटम के फोकस की स्थिति उपस्थिति में परिलक्षित होती है - आइकन की पृष्ठभूमि ग्रे से सफेद तक बदल जाती है। सामान्य शब्दों में, यह उन परिस्थितियों को संदर्भ में स्थानांतरित करने के लिए समझ में आता है जो संभावित रूप से टेम्पलेट के प्रदर्शन को प्रभावित करते हैं। यह बिंदु शायद इस दृष्टिकोण का एकमात्र सीमा-इंटरफ़ेस है।

   
   

यूनिवर्सल आउटलेट

ऊपर वर्णित उपकरण पांचवें संस्करण से कोणीय में उपलब्ध हैं। लेकिन हम एक विकल्प से दूसरे विकल्प पर आसानी से जाना चाहते हैं। ऐसा करने के लिए, हम एक घटक को इकट्ठा करेंगे जो सामग्री और संदर्भ को इनपुट के रूप में स्वीकार करता है और इस सामग्री को स्वचालित रूप से सम्मिलित करने के लिए उपयुक्त तरीका लागू करता है। सामान्य तौर पर, हमारे लिए टाइप string , number , (context: T) => string | number बीच अंतर करना सीखना पर्याप्त है (context: T) => string | number , TemplateRef<T> और Type<any> (लेकिन यहां कुछ बारीकियां हैं, जिनके बारे में हम नीचे चर्चा करेंगे)।

घटक टेम्पलेट इस तरह दिखेगा:

 <ng-container [ngSwitch]="type"> <ng-container *ngSwitchCase="'primitive'">{{content}}</ng-container> <ng-container *ngSwitchCase="'function'">{{content(context)}}</ng-container> <ng-container *ngSwitchCase="'template'"> <ng-container *ngTemplateOutlet="content; context: context"></ng-container> </ng-container> <ng-container *ngSwitchCase="'component'"> <ng-container *ngComponentOutlet="content; injector: injector"></ng-container> </ng-container> </ng-container> 

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

 export class ComponentContent<T> { constructor( readonly component: Type<T>, private readonly injector: Injector | null = null, ) {} } 

पारित संदर्भ के साथ एक इंजेक्टर बनाने के लिए एक विधि जोड़ें:

 createInjectorWithContext(injector: Injector, context: C): Injector { return Injector.create({ parent: this.injector || injector, providers: [ { provide: CONTEXT, useValue: context, }, ], }); } 

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

इस स्थिति को ठीक करने के लिए, हम न केवल एक टेम्पलेट का उपयोग करेंगे, बल्कि एक निर्देश भी होगा ChangeDetectorRef की परिभाषा के स्थान के ChangeDetectorRef भी होगा। इस तरह हम आवश्यक होने पर परिवर्तनों की जाँच शुरू कर सकते हैं।

बहुरूपी पैटर्न

व्यवहार में, यह उस प्रकार की सामग्री के आधार पर टेम्पलेट के व्यवहार को नियंत्रित करने के लिए उपयोगी हो सकता है जो इसमें आया था।

उदाहरण के लिए, हम कुछ विशेष के लिए एक टेम्पलेट को एक घटक में स्थानांतरित करने का अवसर देना चाहते हैं। उसी समय, ज्यादातर मामलों में, आपको बस एक आइकन की आवश्यकता होती है। ऐसी स्थिति में, आप डिफ़ॉल्ट व्यवहार को कॉन्फ़िगर कर सकते हैं और इसका उपयोग तब कर सकते हैं जब एक आदिम या फ़ंक्शन इनपुट में प्रवेश करता है। कभी-कभी यहां तक ​​कि आदिम का प्रकार भी महत्वपूर्ण होता है: उदाहरण के लिए, यदि आपके पास टैब पर अपठित संदेशों की संख्या प्रदर्शित करने के लिए एक बैज घटक है, लेकिन आप उन पृष्ठों को हाइलाइट करना चाहते हैं जिनके लिए एक विशेष आइकन के साथ ध्यान देने की आवश्यकता होती है।

ऐसा करने के लिए, आपको एक और चीज़ जोड़ने की ज़रूरत है - आदिम प्रदर्शित करने के लिए एक टेम्पलेट पास करना। घटक में @ContentChild जोड़ें, जो सामग्री से TemplateRef लेता है। यदि कोई पाया जाता है और एक फ़ंक्शन, स्ट्रिंग या संख्या सामग्री को पास कर दी जाती है, तो हम इसे संदर्भ के रूप में आदिम के साथ त्वरित कर सकते हैं:

  <ng-container *ngSwitchCase="'interpolation'"> <ng-container *ngIf="!template; else child">{{primitive}}</ng-container> <ng-template #child> <ng-container *ngTemplateOutlet="template; context: { $implicit: primitive }" ></ng-container> </ng-template> </ng-container> 

अब हम प्रक्षेप को स्टाइल कर सकते हैं या प्रदर्शन के लिए कुछ घटक को भी पास कर सकते हैं:

  <content-outlet [content]="content" [context]="context"> <ng-template let-primitive> <div class="primitive">{{primitive}}</div> </ng-template> </content-outlet> 

यह हमारे कोड को व्यवहार में लाने का समय है।

के उपयोग

उदाहरण के लिए, हम दो घटकों को रेखांकित करते हैं: टैब और कॉम्बो बॉक्स । टैब टेम्प्लेट में प्रत्येक टैब के लिए एक कंटेंट-आउटलेट होगा, जिसमें उपयोगकर्ता द्वारा पास की गई वस्तु संदर्भ होगी:

 <content-outlet *ngFor="let tab of tabs" [class.disabled]="disabledItemHandler(tab)" [content]="content" [context]="getContext(tab)" (click)="onClick(tab)" ></content-outlet> 

आपको डिफ़ॉल्ट शैली सेट करने की आवश्यकता है: उदाहरण के लिए, फ़ॉन्ट आकार, वर्तमान टैब के नीचे रेखांकित, रंग। लेकिन हम सामग्री के लिए ठोस उपस्थिति छोड़ देंगे। घटक कोड कुछ इस तरह होगा:

 export class TabsComponent<T> { @Input() tabs: ReadonlyArray<T> = []; @Input() content: Content = ({$implicit}) => String($implicit); @Input() disabledItemHandler: (tab: T) => boolean = () => false; @Input() activeTab: T | null = null; @Output() activeTabChange = new EventEmitter<T>(); getContext($implicit: T): IContextWithActive<T> { return { $implicit, active: $implicit === this.activeTab, }; } onClick(tab: T) { this.activeTab = tab; this.activeTabChange.emit(tab); } } 

हमें एक घटक मिला जो एक मनमाना सरणी के साथ काम कर सकता है, इसे टैब के रूप में प्रदर्शित कर सकता है। आप बस वहाँ तार पास कर सकते हैं और मूल स्वरूप प्राप्त कर सकते हैं:

और आप वस्तुओं और उन्हें प्रदर्शित करने के लिए एक टेम्पलेट स्थानांतरित कर सकते हैं और अपनी आवश्यकताओं को पूरा करने के लिए उपस्थिति को अनुकूलित कर सकते हैं, HTML, आइकन, संकेतक जोड़ सकते हैं:

कॉम्बोबॉक्स के मामले में , हम पहले दो बुनियादी घटक बनाएंगे, जिसमें यह शामिल है: एक आइकन और एक मेनू के साथ एक इनपुट फ़ील्ड। उत्तरार्द्ध विस्तार से पेंट करने का कोई मतलब नहीं है - यह टैब के समान है, केवल लंबवत है और इसमें अन्य मूल शैलियाँ हैं। और इनपुट फ़ील्ड को निम्नानुसार लागू किया जा सकता है:

 <input #input [(ngModel)]="value"/> <content-outlet [content]="content" (mousedown)="onMouseDown($event, input)" > <ng-template let-icon> <div [innerHTML]="icon"></div> </ng-template> </content-outlet> 

यदि आप इनपुट को पूरी तरह से तैनात करते हैं, तो यह आउटलेट को ब्लॉक कर देगा और उस पर सभी क्लिक होंगे। यह एक सजावटी आइकन के साथ एक साधारण इनपुट क्षेत्र के लिए सुविधाजनक है, जैसे कि आवर्धक ग्लास आइकन। ऊपर के उदाहरण में, पॉलीमॉर्फिक टेम्पलेट दृष्टिकोण लागू किया जाता है - एसवीजी आइकन डालने के लिए प्रेषित स्ट्रिंग का उपयोग innerHTML रूप में किया जाएगा। यदि, उदाहरण के लिए, हमें दर्ज किए गए उपयोगकर्ता के अवतार को दिखाने की आवश्यकता है, तो हम टेम्पलेट को वहां स्थानांतरित कर सकते हैं।

कॉम्बोबॉक्स को भी एक आइकन की आवश्यकता होती है, लेकिन इसे इंटरैक्टिव होना चाहिए। इसे ध्यान केंद्रित करने से रोकने के लिए, आउटलेट में onMouseDown हैंडलर जोड़ें:

 onMouseDown(event: MouseEvent, input: HTMLInputElement) { event.preventDefault(); input.focus(); } 

टेम्प्लेट को सामग्री के रूप में पास करने से हम सीएसएस के माध्यम से उच्च स्थिति में बस इसे बढ़ा पाएंगे : सापेक्ष आइकन। फिर आप कॉम्बो बॉक्स में ही उस पर क्लिक करने के लिए सदस्यता ले सकते हैं:

 <app-input [content]="icon"></app-input> <ng-template #icon> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon" [class.icon_opened]="opened" (click)="onClick()" > <polyline points="7,10 12,15 17,10" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" /> </svg> </ng-template> 

इस तरह के एक संगठन के लिए धन्यवाद, हमें वांछित व्यवहार मिलता है:

घटक कोड, टैब के मामले में, डेटा मॉडल के ज्ञान के साथ फैलाव। यह कुछ इस तरह दिखता है:

 export class ComboBoxComponent<T> { @Input() items: ReadonlyArray<T> = []; @Input() content: Content = ({$implicit}) => String($implicit); @Input() stringify = (item: T) => String(item); @Input() value: T | null = null; @Output() valueChange = new EventEmitter<T | null>(); stringValue = ''; //          get filteredItems(): ReadonlyArray<T> { return this.items.filter(item => this.stringify(item).includes(this.stringValue), ); } } 

ऐसा सरल कोड आपको कॉम्बोबॉक्स में किसी भी ऑब्जेक्ट का उपयोग करने और उनके प्रदर्शन को बहुत लचीले ढंग से अनुकूलित करने की अनुमति देता है। कुछ सुधारों के बाद जो वर्णित अवधारणा से संबंधित नहीं हैं, यह उपयोग के लिए तैयार है। उपस्थिति हर स्वाद के लिए अनुकूलित किया जा सकता है:

निष्कर्ष

अज्ञेय घटकों का निर्माण प्रत्येक विशेष मामले को ध्यान में रखने की आवश्यकता को समाप्त करता है। उसी समय, उपयोगकर्ताओं को एक विशिष्ट स्थिति के लिए घटक को कॉन्फ़िगर करने के लिए एक सरल उपकरण मिलता है। इन समाधानों का पुन: उपयोग करना आसान है। डेटा मॉडल से स्वतंत्रता कोड को सार्वभौमिक, विश्वसनीय और एक्स्टेंसिबल बनाती है। उसी समय, हमने इतनी सारी पंक्तियाँ नहीं लिखीं और मुख्य रूप से अंतर्निहित कोणीय उपकरण का उपयोग किया।

वर्णित दृष्टिकोण का उपयोग करते हुए, आप जल्दी से नोटिस करेंगे कि विशिष्ट लाइनों या पैटर्न के बजाय सामग्री के संदर्भ में सोचना कितना सुविधाजनक है। सत्यापन त्रुटि संदेश, टूलटिप्स, मोडल विंडो प्रदर्शित करना - यह दृष्टिकोण न केवल उपस्थिति को अनुकूलित करने के लिए, बल्कि संपूर्ण रूप से सामग्री को स्थानांतरित करने के लिए भी अच्छा है। स्केचिंग लेआउट और परीक्षण तर्क आसान है! उदाहरण के लिए, पॉपअप दिखाने के लिए, उपयोगकर्ता को एक घटक या यहां तक ​​कि एक टेम्पलेट बनाने की आवश्यकता नहीं है, आप बस स्टब स्ट्रिंग पास कर सकते हैं और बाद में उस पर वापस आ सकते हैं।

हम Tinkoff.ru पर लंबे समय से वर्णित दृष्टिकोण को सफलतापूर्वक लागू करते हैं और इसे एनजी-पॉलीमॉर्फियस नामक एक छोटे (1 केबी गज़िप) ओपन-सोर्स लाइब्रेरी में स्थानांतरित करते हैं।

स्रोत कोड

npm पैकेज

इंटरएक्टिव डेमो और सैंडबॉक्स

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