एनएक्सएक्स-डिटैटेबल रो-डिटेल के अंदर डायनामिक कंपोनेंट

Question

मैं ngx-datatable का उपयोग कर एक पुन: प्रयोज्य डेटाटेबल बना रहा हूं और मैं पंक्ति विस्तार के अंदर गतिशील घटकों को प्रदान करना चाहता हूं। डेटा योग्य घटक एक घटक वर्ग को एक मूल मॉड्यूल से एक तर्क के रूप में प्राप्त करता है और मैं CompComFent को createComponent का उपयोग करता हूं। मैं देख सकता हूं कि डायनेमिक कंपोनेंट के लिए कंस्ट्रक्टर और ऑनइनिट विधियां चल रही हैं, लेकिन इसे DOM से अटैच नहीं किया जा रहा है।

यह वही है जो datable html पंक्ति-विस्तार के लिए दिखता है:

 <!-- [Row Detail Template] -->
        <ngx-datatable-row-detail rowHeight="100" #myDetailRow (toggle)="onDetailToggle($event)">
          <ng-template let-row="row" #dynamicPlaceholder let-expanded="expanded" ngx-datatable-row-detail-template>
          </ng-template>
        </ngx-datatable-row-detail>
 <!-- [/Row Detail Template] -->

और यह मेरी .ts फाइल की तरह दिखता है:

@ViewChild('myDetailRow', {static: true, read: ViewContainerRef}) myDetailRow: ViewContainerRef;
@ViewChild('dynamicPlaceholder', {static: true, read: ViewContainerRef}) dynamicPlaceholder: ViewContainerRef;

renderDynamicComponent(component) {
        var componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
        var hostViewConRef1 = this.myDetailRow;
        var hostViewConRef2 = this.dynamicPlaceholder;
        hostViewConRef1.createComponent(componentFactory);
        hostViewConRef2.createComponent(componentFactory);
}

एक और बिंदु यह है कि अगर मेरा #dynamicPlaceholderएनजी-टेम्प्लेट एनजीएक्स-डिटैटेबल के बाहर रखा गया है, तो यह काम करता है और डायनामिक मॉड्यूल को प्रदान और प्रदर्शित किया जाता है।

Comments

यह सामग्री प्रक्षेपण के साथ करना है। घटक टैग को कुछ भी रखा गया है, जब तक कि घटक के पास <ng-content>किसी नेस्टेड मार्कअप को रेंडर करने के लिए टैग नहीं है।

— C_Ogoo

क्या आप मेरे मामले में मदद करने के लिए एक त्वरित उदाहरण के साथ मेरी मदद कर सकते हैं?

— राघव कंवल

Answer 1

हम एक घटक को एक टेम्पलेट ( <ng-template>) रनटाइम पर प्रस्तुत नहीं कर सकते हैं createComponent
क्योंकि एफैक टेम्पलेट संकलन समय पर कोणीय द्वारा संसाधित होते हैं। इसलिए हमें ऐसे समाधान की आवश्यकता है जो संकलन के समय काम करे।

---

कमियों के साथ समाधान

ng-content यहाँ हमारी मदद कर सकते हैं:

<!-- [Row Detail Template] -->
<ngx-datatable-row-detail rowHeight="100" (toggle)="onDetailToggle($event)">
   <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
      <ng-content></ng-content>
   </ng-template>
</ngx-datatable-row-detail>
<!-- [/Row Detail Template] -->

हम तब कुछ भी पास कर सकते हैं जिसे हम विस्तार से देखना चाहते हैं:

<my-table>From the ouside but I cant access the current row :(</my-table>

लेकिन एक समस्या है: हम उस समय का उपयोग नहीं कर सकते ng-contentजब हम पास किए गए टेम्पलेट में वर्तमान पंक्ति का उपयोग करना चाहते हैं।

---

समाधान

लेकिन ngx-datatableहमें कवर किया। हम ngx-datatable-row-detailनिर्देश के लिए एक टेम्पलेट पास कर सकते हैं :

<ngx-datatable-row-detail [template]="myDetailTemplate "rowHeight="100" (toggle)="onDetailToggle($event)">
</ngx-datatable-row-detail>

तब टेम्पलेट को @Inputचर के माध्यम से बाहर किसी भी घटक से पारित किया जा सकता है :

<ng-template #myDetailTemplate let-row="row">
  From the outside with access to the current row: {{row.name}}
</ng-template>

स्टैकब्लिट्ज़ पर एक नज़र डालें , जहां मैंने my-tableपोक के रूप में एक घटक लिखा था ।

Answer 2

एक घटक को परिभाषित करें जो इसकी सामग्री को उजागर करता है TemplateRef

<ng-template #myTemplate let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>

    <div><strong>Address</strong></div>
    <div>{{ row?.address?.city }}, {{ row?.address?.state }}</div>
</ng-template>

ViewChildके लिए एक सुलभ संपत्ति बनाने के लिए उपयोग करेंTemplateRef

export class DynamicComponent implements OnInit {

  @ViewChild("myTemplate",{static:true}) myTempalte : TemplateRef<any>
...
}

टेम्पलेट के बिना अपनी पंक्ति का विवरण निर्धारित करें

<ngx-datatable-row-detail rowHeight="100" (toggle)="onDetailToggle($event)">
</ngx-datatable-row-detail>

निर्देश तक पहुंचने के लिए एक संपत्ति को परिभाषित करें

@ViewChild(DatatableRowDetailDirective,{static:true}) templ:DatatableRowDetailDirective; 
 constructor(  
    private cfr: ComponentFactoryResolver, //import cfr
  )
....
toggleExpandRow(row) { 
   const factory = this.cfr.resolveComponentFactory<DynamicComponent>(
      DynamicComponent
    );

    const component = factory.create(this.injector,[]);   //create component dynamically
    this.templ._templateInput = component.instance.myTempalte; // set directives template to your components template 
    this.table.rowDetail.toggleExpandRow(row);
}

Stackblitz

संपादित करें: मैं ngx-datatableस्रोत उदास भाग के साथ fiddled यह ngx-datatable-row-detailएक घटक नहीं है, लेकिन निर्देशक है और यह डोम से जुड़ा नहीं है। तो इसका कोई ViewContainerरेफ नहीं है । इससे इसमें तत्वों को इंजेक्ट करना थोड़ा मुश्किल हो जाता है। आप क्या कर सकते हैं अपने घटक में टेम्पलेट्स को परिभाषित करें और TemplateRefएस का उपयोग करें और उन्हें असाइन करें जहां आप अपने घटक को प्रस्तुत करते हैं।

Comments

इनपुट के लिए धन्यवाद, मैंने आपके तरीके को अपनाने की कोशिश की, लेकिन मुझे el.setAttribute is not a functionघटकों पर त्रुटि हो रही है । किसी भी विचार क्यों हो रहा हो सकता है? this.dynamicPlaceholder.elementRef.nativeElement एक टिप्पणी देता है, क्या यह हो सकता है?

— राघव कंवल

@RaghavKanwal मेरा अद्यतन उत्तर देखें।

— एल्डार