如何創建多個ngbPopover情況下與自定義模板

Question

我試圖用NG-引導庫的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> 

這對我有用。我希望它有幫助。