我有一个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来访问这些元素的方法,可能就像带有string:template的字典
答案 0 :(得分:0)
因此创建一个自定义指令
<TextView
android:id="@+id/lobby_key_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text=""
android:textColor="@android:color/transparent"
android:textSize="8sp"/>
具有类似的模板
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>) {}
}
和主要组成部分ts
<ng-template modal-template="{{student.name}}"></ng-template>
在按钮单击功能中发送模板名称参数,以从字典中选择模板
答案 1 :(得分:0)
第一步是自定义指令
# 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;
}, {});
}