ngFor内的动态模板参考变量(角9)

Question

如何在元素中声明动态模板引用变量？

我想使用ng引导程序中的popover组件，弹出代码(带有Html绑定)如下所示：

<ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template>
<button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content">
    I've got markup and bindings in my popover!
</button>

我如何将包装在ngFor中

<div *ngFor="let member of members">
    <!-- how to declare the '????' -->
    <ng-template #????>Hello, <b>{{member.name}}</b>!</ng-template>
        <button type="button" class="btn btn-secondary" [ngbPopover]="????" popoverTitle="Fancy content">
        I've got markup and bindings in my popover!
    </button>
</div>

嗯..。知道吗？

Answer 1

模板引用变量的作用域是定义在其中的模板。结构指令创建嵌套模板，因此引入一个单独的作用域.。

因此，您只需使用一个变量作为模板引用。

<div *ngFor="let member of members">
  <ng-template #popupContent>Hello, <b>{{member.name}}</b>!</ng-template>
  <button type="button" class="btn btn-secondary" [ngbPopover]="popupContent" popoverTitle="Fancy content">
      I've got markup and bindings in my popover!
  </button>
</div>

而且它应该可以工作，因为它已经在<ng-template ngFor中声明了

柱塞实例

有关更多细节，请参见：

• 有选择器的ng内容中的角条件复制温度

Answer 2

这是我找到的最好的解决方案：https://stackoverflow.com/a/40165639/3870815

在这个答复中，他们使用：

@ViewChildren('popContent') components:QueryList<CustomComponent>;

若要生成那些动态生成的组件的列表，请执行以下操作。强烈推荐你去看看！

Answer 3

另一种允许这样做的方法是创建一个封装按钮和ng模板的组件。

<div *ngFor="let member of members">
    <popover-button [member]="member"></pop-over-button>
</div>

并在popover按钮组件中包含以下内容

<ng-template #popContent>Hello, <b>{{member.name}}</b>!</ng-template>
    <button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content">
    I've got markup and bindings in my popover!
</button>