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

Angular 如何使用自定义模板创建多个ngbPopover实例,angular,ng-bootstrap,Angular,Ng Bootstrap,我正在尝试使用ng引导库的NgbOpover组件创建顶部导航菜单的子菜单选项的弹出窗口。我打算使用的功能,有一个自定义的每个菜单选项。菜单选项通过*ngFor指令动态生成。我找不到为*ngFor的每个元素使用模板的方法。不确定我缺少什么似乎是一个非常简单的要求。以下是我想做的: <li class="nav-item" *ngFor="let option of topMenuOptions; let i = index;"> <a routerLink

我正在尝试使用ng引导库的NgbOpover组件创建顶部导航菜单的子菜单选项的弹出窗口。我打算使用的功能,有一个自定义的每个菜单选项。菜单选项通过*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>
  • 一些子菜单{{i}

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

    谢谢。我会尝试一下,让你知道。谢谢。这很有效。最初我跳过了这个,因为当我复制/粘贴html两次作为测试时,它不起作用。但它在ngFor中非常有效。
    <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>