मेरे पास एक ngtemplate है जो एक मोडल के लिए आवश्यक है मैं प्रत्येक पैराग्राफ टैग में एक नाम-बटन (मोडल के लिए) जोड़ी बना रहा हूं और मोडल के लिए गतिशील सामग्री बनाना चाहता हूं


<ng-container *ngFor="let student of students">
<p>{{student.name}} <button (click)="modalService.show(modalContent)"> </p>
    <ng-template #content>
        .... for listing all details under student like student.roll, student.gender
    </ng-template>
</ng-container>

लेकिन चूंकि मैं उसी #content के साथ लूप करता हूं, यह पहली बार पहचाना गया और आईडी के लिए टेम्पलेट बनाना जारी नहीं रखेगा, समझ में आता है।

@ViewChild('content',{static: false}) modalContent: TemplateRef<any>;

इसलिए ngtemplate सामग्री को उपरोक्त modalContent modelService में मैप किया गया है, यह एक कस्टम सेवा है जो TemplateRef में लेती है।

आदर्श रूप से मैं कई ngtemplate बनाने और modalContent के साथ मैपिंग करने में मदद चाहता हूँ

मुझे नाम टैग सेट करके इन तत्वों तक पहुंचने का एक तरीका चाहिए, स्ट्रिंग के साथ एक शब्दकोश की तरह हो सकता है: टेम्पलेट

0
Srinivas Jayaram 27 अक्टूबर 2019, 03:23

1 उत्तर

सबसे बढ़िया उत्तर

पहला कदम कस्टम निर्देश है

# create a directive here
@Directive({
  selector: 'ng-template[modal-template]'
})
export class ModalDirective {
  @Input('modal-template') name: string;

  constructor(public template: TemplateRef<any>) {}
}

टेम्पलेट की तरह है,

<ng-template modal-template="{{student.name}}"></ng-template>

और मुख्य घटक ts . में

@ViewChildren(ModalDirective) cellTemplates: QueryList<ModalDirective>;

cellTemplatesMap: any;

...

ngAfterContentInit() {
  this.cellTemplatesMap = this.cellTemplates.reduce((acc, cur) => {
    acc[cur.name] = cur.template;
    return acc;
  }, {});
}
0
Srinivas Jayaram 3 पद 2020, 21:38