माइक्रो-टेम्प्लेट से अपना कंपोनेंट बनाएं

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

मेरे दैनिक कार्य में, एक भी परियोजना इसके बिना नहीं हो सकती है।

लेकिन इस लाइब्रेरी के लचीलेपन के सभी फायदों के अलावा, अपने स्वयं के घटकों को लिखने में रचनाकारों के अनुभव को आकर्षित करना भी संभव है, और यह मेरे लिए कोणीय पर सर्वोत्तम-अभ्यास विकास पर सबसे अच्छा मैनुअल है।

इस लेख में मैं आपके साथ साझा करना चाहता हूं कि आप एक जटिल टेम्पलेट के साथ दृष्टिकोण को कैसे लागू कर सकते हैं जो कि MatTableModule मॉड्यूल में लागू किया गया है।

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

टेम्पलेट ( स्रोत ):

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container matColumnDef="position"> <th mat-header-cell *matHeaderCellDef> No. </th> <td mat-cell *matCellDef="let element"> {{element.position}} </td> </ng-container> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <ng-container matColumnDef="weight"> <th mat-header-cell *matHeaderCellDef> Weight </th> <td mat-cell *matCellDef="let element"> {{element.weight}} </td> </ng-container> <ng-container matColumnDef="symbol"> <th mat-header-cell *matHeaderCellDef> Symbol </th> <td mat-cell *matCellDef="let element"> {{element.symbol}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> 

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

संरचना

संस्थाओं का एक सेट जिसे हमें बनाने की आवश्यकता है। यह ब्लॉक आरेख उनकी बातचीत को दिखाता है।

पहला कदम

हमें अपने माइक्रो-टेम्प्लेट को पंजीकृत करने के लिए एक सेवा की आवश्यकता है।

 @Injectable() export class RegisterPropertyDef<T> { //        Map //    -  ,     //          //         private store = new Map<ComponentInstance, Map<string, TemplateRef<T>>>(); setTemplateById(cmp: ComponentInstance, id: string, template: TemplateRef<any>): void { const state = this.store.get(cmp) || new Map(); state.set(id, template); this.store.set(cmp, state); } getTemplate(cmp: ComponentInstance, id: string): TemplateRef<T> { return this.store.get(cmp).get(id); } } 

दूसरा कदम

टेम्प्लेटिंग टेम्प्लेट के लिए एक निर्देश बनाएँ:

 @Directive({ selector: '[providePropertyDefValue]' }) export class ProvidePropertyDefValueDirective<T> implements OnInit { @Input() providePropertyDefValueId: string; constructor( private container: ViewContainerRef, private template: TemplateRef<any>, //       private registerPropertyDefService: RegisterPropertyDefService<any>, //    @Optional() private parent: Alias<T[]> //             ) {} ngOnInit(): void { this.container.clear(); //    ,    this.registerPropertyDefService.setTemplateById( this.parent as ComponentInstance, this.providePropertyDefValueId, this.template ); } } 

चरण तीन

एक घटक बनाएँ:

 @Component({ selector: 'lib-card-list', template: ` <mat-card *ngFor="let source of sources"> <ul> <li *ngFor="let key of displayedColumns"> <span>{{ findColumnByKey(key)?.label }}</span> <span> <ng-container [ngTemplateOutlet]="findColumnByKey(key)?.template || default" [ngTemplateOutletContext]="{ $implicit: source }" ></ng-container> </span> </li> </ul> </mat-card> <ng-template #default></ng-template> `, styles: [ 'mat-card { margin: 10px; }' ] }) export class CardListComponent<T> implements OnInit, AfterViewInit { @Input() defaultColumns: DefaultColumn[]; @Input() source$: Observable<T[]>; displayedColumns = []; sources: T[] = []; constructor(private readonly registerPropertyDefService: RegisterPropertyDefService<T>, private readonly parent: Alias<T[]>) { } ngOnInit() { this.source$.subscribe((data: T[]) => this.sources = data); this.displayedColumns = this.defaultColumns.map(c => c.id); } findColumnByKey(key: string): DefaultColumn { return this.defaultColumns.find(column => column.id === key); } ngAfterViewInit(): void { this.defaultColumns = this.defaultColumns.map(column => Object.assign(column, { template: this.registerPropertyDefService.getTemplate(this.parent as ComponentInstance, column.id) }) ); } } 

थोड़ा स्पष्टीकरण, घटक का मुख्य कार्य ngAfterViewInit पद्धति में डेटा संरचना की परिभाषा को समृद्ध करना है। यहां टेम्प्लेट्स को इनिशियलाइज़ करने के बाद, हम डिफॉल्टकॉल्यूमन्स मॉडल को टेम्प्लेट के साथ अपडेट करते हैं।

मार्कअप में, आप निम्नलिखित पंक्तियों पर ध्यान दे सकते हैं -

 <ng-container [ngTemplateOutlet]="findColumnByKey(key)?.template || default" [ngTemplateOutletContext]="{ $implicit: source }"></ng-container> 

यहाँ एक फीचर का उपयोग स्कोप में (AngularJS में) स्कोप पास करने के लिए किया जाता है। इससे हमारे माइक्रो टेम्प्लेट में लेटर-माय-वेर कंस्ट्रक्शन के माध्यम से एक वैरिएबल घोषित करना सुविधाजनक हो जाता है जिसमें डेटा झूठ होगा।

के उपयोग

 // app.component.html <lib-card-list [defaultColumns]="defaultColumns" [source$]="sources$"></lib-card-list> <ng-container *libProvidePropertyDefValue="let element; id: 'id'"> {{ element.id }} </ng-container> <ng-container *libProvidePropertyDefValue="let element; id: 'title'"> {{ element.title }} </ng-container> 

हमारे नए घटक को शुरू करना, और इसके लिए मापदंडों को पारित करना।

एनजी-कंटेनर और हमारे libProvidePropertyDefValue निर्देश के माध्यम से टेम्पलेट परिभाषा।

यहाँ सबसे महत्वपूर्ण बात है

“रहने दो; आईडी: 'आईडी' »

जहां तत्व टेम्पलेट का दायरा है जो सूची के डेटा के साथ ऑब्जेक्ट के बराबर है,
आईडी माइक्रो-टेम्प्लेट का पहचानकर्ता है।

अब मैं ngOnInit मेथड में प्रोप्रोपर्टीडेफ़ल्यू निर्देश पर लौटना चाहता हूं

  ngOnInit(): void { this.container.clear(); ... } 

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

 <lib-card-list [defaultColumns]="defaultColumns" [source$]="sources$"> <ng-container *libProvidePropertyDefValue="let element; id: 'id'"> {{ element.id }} </ng-container> <ng-container *libProvidePropertyDefValue="let element; id: 'title'"> {{ element.title }} </ng-container> </lib-card-list> 

वस्तुनिष्ठ - दूसरा उपयोग मामला अधिक उत्पादक है।

 @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [{ provide: Alias, useExisting: forwardRef(() => AppComponent) }] }) export class AppComponent extends Alias<any> { title = 'card-list-example'; defaultColumns: DefaultColumn[] = [ { id: 'id', label: 'ID' }, { id: 'title', label: 'Title' } ]; sources$ = of([ { id: 1, title: 'Hello' }, { id: 2, title: 'World' } ]); } 

यहां सब कुछ काफी प्राथमिक है, केवल एक चीज पर विचार करना है:

प्रदाता: [{प्रदान करें: उपनाम, उपयोग: मौजूदा: अग्रेषित ((= => AppComponent)}]

यह डिज़ाइन टेम्पलेट और उन्हें उपयोग करने वाले घटक को जोड़ने के लिए आवश्यक है।

हमारी सेवा में, निर्माता को इंजेक्टर से AppComponent घटक का एक उदाहरण प्राप्त होगा।

इसके साथ ही

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

कैसे सुधारें?

आप कोणीय सामग्री और फ़िल्टरिंग से पृष्ठांकन जोड़ सकते हैं।

 // card-list.component.html <mat-paginator [pageSize]="5"showFirstLastButton></mat-paginator> 

 // card-list.component.ts @ViewChild(MatPaginator) paginator: MatPaginator; this.paginator.initialized.subscribe(() => { //     }); this.paginator.page.subscribe((pageEvent: PageEvent) => { //       }) 

फ़िल्टरिंग को मैट-फॉर्म-फ़ील्ड के माध्यम से लागू किया जा सकता है और इसी तरह पेजिंग, अपडेट डेटा के दौरान पेजों को स्विच करने के लिए।

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