使用 viewchild 創建動態 ng-template 和 map

Question

我有一個模態所需的 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，它第一次識別並且不會繼續為id創建模板，可以理解的。

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

所以 ngtemplate 內容被映射到上面的 modalContent modelService 是一個接受 TemplateRef 的自定義服務。

理想情況下，我需要幫助制作多個 ngtemplate 並使用 modalContent 進行映射

我需要一種通過將名稱標簽設置為 i 來訪問這些元素的方法，可能就像帶有字符串的字典：模板

Answer 1

所以創建一個自定義指令

import { Directive, Input, TemplateRef } from '@angular/core';

@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;
  }, {});
}

發送按鈕中的模板名稱參數單擊 function 從字典中選擇模板

Answer 2

第一步是自定義指令

# 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;
  }, {});
}