इनलाइन सामग्री के साथ कोणीय घटक

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



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

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

एक कोणीय घटक उपयोगकर्ता इंटरफ़ेस की सबसे छोटी इकाई है जिसे एक सरल कार्य करना चाहिए और इससे अधिक कुछ नहीं। सभी अवसरों के लिए घटक बनाना बुरा अभ्यास है। इसलिए, आपको लचीलेपन और सरलता के बीच समझौता करना होगा।

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



संपूर्ण घटक, जिसे विजेट कहा जाएगा, हरे रंग में उल्लिखित है। हेडर स्विच को लाल रंग में और सामग्री को नीले रंग में हाइलाइट किया गया है। कोणीय एक अविश्वसनीय रूप से शक्तिशाली ढांचा है, चित्र में एक के समान एक घटक बनाना, कोणीय के लिए एक बहुत ही तुच्छ कार्य है।

लेकिन क्या होगा यदि इस घटक को अधिक लचीला बनाया जाता है, उदाहरण के लिए, ताकि सामग्री विजेट घटक के मापदंडों के आधार पर बदल जाए?

आप विजेट पैरामीटर के आधार पर सामग्री के बाहरी प्रतिनिधित्व को हल कर सकते हैं, उदाहरण के लिए, ngIf संरचनात्मक निर्देश का उपयोग करके। आप विभिन्न दृश्यों के बीच स्विच कर सकते हैं। और अगर बहुत अधिक प्रस्तुतियाँ हैं, तो आप एक और ngSwitch संरचनात्मक निर्देश का उपयोग कर सकते हैं।

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

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

इस मामले में, विजेट घटक को निम्नानुसार दर्शाया जा सकता है:

// widget.component.ts … private widgetContentTemplate: TemplateRef<any>; //      @ContentChild(WidgetContentTemplateDirective, { read: TemplateRef }) set WidgetContentTemplate(value: TemplateRef<any>) { this.widgetContentTemplate = value; } get WidgetContentTemplate(): TemplateRef<any> { return this.widgetContentTemplate; } … 

 <!-- widget.component.html --> … <div class="widget__content"> <!--      ,      context.   ,     --> <ng-container *ngTemplateOutlet="WidgetContentTemplate || DefaultWidgetContentTemplate; context: { post: SelectedPost }"> </ng-container> </div> <ng-template #DefaultWidgetContentTemplate> <div>[    ]</div> </ng-template> … 

NgTemplateOutlet निर्देश टेम्पलेट टेम्पलेट ऑब्जेक्ट को स्वीकार करता है, जो @ContentChild का उपयोग करके घटक में पढ़ा जाता है। ऐसा करने के लिए, आपको एक सरल निर्देश बनाने की आवश्यकता है। यहाँ उसका कोड है:

 // widget-content-template.directive.ts import { Directive, TemplateRef } from '@angular/core'; @Directive({ selector: '[appWidgetContentTemplate]' }) export class WidgetContentTemplateDirective { get Template(): TemplateRef<any> { return this.template; } constructor(private readonly template: TemplateRef<any>) {} } 

विजेट स्विच से पैरामीटर को संदर्भ ऑब्जेक्ट का उपयोग करके सामग्री को पास किया जा सकता है। घटक से संदर्भ को सही ढंग से पढ़े जाने के लिए, मूल घटक में यह आवश्यक है, हमारे मामले में यह उपयुक्त है, उन्हें निम्नानुसार वर्णन करना न भूलें:

 <!-- app.component.html --> <app-widget-component Title="  (  )"> <!-- let-post="post" ,         --> <ng-template appWidgetContentTemplate let-post="post"> <app-post-view [Post]="post"></app-post-view> </ng-template> </app-widget-component> <br> <br> <app-widget-component Title="  (  )"> <!--  let-post="post"     ,  ShowPostInfo  AppComponent --> <ng-template appWidgetContentTemplate let-post="post"> <app-post-view [Post]="post" [ShowPostInfo]="ShowPostInfo"></app-post-view> </ng-template> </app-widget-component> 

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



कोड का पूर्ण संस्करण यहां देखा जा सकता है ।