angular - 如何使用自定义模板创建多个 ngbPopover 实例

Question

我正在尝试使用 ng-bootstrap 库的 ngbPopover 组件来创建顶部导航菜单的子菜单选项的弹出窗口。我打算使用为每个菜单选项自定义的功能。菜单选项是通过 *ngFor 指令动态生成的。我找不到为 *ngFor 的每个元素使用模板的方法。不确定我缺少什么似乎是一个非常简单的要求。这是我试图做的:

    <li class="nav-item" *ngFor="let option of topMenuOptions; let i = index;">
        <a routerLinkActive="active" [routerLink]="[option.permalink, option.id]" class="nav-link" [ngClass]="{'nav-link-hovered': isHovered(option.name)}"
          (mouseover)="onHoverOverLink(option.name, true, i)" (mouseout)="onHoverOverLink(option.name, false, i)" [ngbPopover]="'subMenues' + i"
          placement="bottom" triggers="manual">{{option.name}}</a>
          <template [attr.id]="'subMenues' + i">
            some submenues {{i}}
          </template>
    </li>

看起来不可能通过这种语法[ngbPopover]="'subMenues' + i"

动态生成模板引用

除了每个弹出窗口都应该有自己的

之外，这就是我想要实现的目标

Answer 1

<li class="nav-item" *ngFor="let option of topMenuOptions; let i = index">
    <template #submenus>
        some submenues {{i}}
    </template>
    <!-- assuming "option.name" is a string -->
    <a href="#" popoverTitle="{{option.name}}" [ngbPopover]="submenus"
      placement="bottom" triggers="mouseenter:mouseleave">menu nr. {{i}}
    </a>
</li>

这对我有用。我希望它有所帮助。