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来访问这些元素的方法，可能就像带有string：template的字典

Answer 1

因此创建一个自定义指令

<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>

在按钮单击功能中发送模板名称参数，以从字典中选择模板

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

创建动态ng模板并使用viewchild进行映射

2 个答案: