如何使用带有子组件的 Ng-Bootstrap Nav 作为选项卡？

Question

我正在使用来自Angular Bootstrap 的 Nav 组件，它的使用方式如下（来自官方示例）：

// Working Official Example:
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">

  <li [ngbNavItem]="1">
    <a ngbNavLink>One</a>
    <ng-template ngbNavContent>
      <p>Content for One</p>
    </ng-template>
  </li>

  <li [ngbNavItem]="2">
    <a ngbNavLink>Two</a>
    <ng-template ngbNavContent>
      <p>Content for Two</p>
    </ng-template>
  </li>

  // etc...
</ul>

<div [ngbNavOutlet]="nav" class="mt-2"></div>

但是在同一个文件中包含大量内容会使其冗长且混乱，因此我想将导航选项卡放在一个子组件中。我已经尝试过了，但它不起作用：

// What I want to achieve:
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">

  <tab-section-1></tab-section-1>

  <tab-section-2></tab-section-2>

  // etc...
</ul>

<div [ngbNavOutlet]="nav" class="mt-2"></div>

子组件：

// tab-section-1
<li [ngbNavItem]="1">
  <a ngbNavLink>One</a>
  <ng-template ngbNavContent>
    <p>Content for One</p>
  </ng-template>
</li>

但它不起作用:(

标签之间的切换效果非常好，甚至标签标题也会显示出来。但是标签 content 没有被渲染，很可能是因为它是 <ng-template> 并且是由另一个 div 中的 ng-bootstrap 渲染的。

我已经四处寻找，但一无所获！谢谢⭐

Answer 1

结构略有不同，但您可以尝试为ng-template 中的内容创建组件。这样您就不会破坏导航功能并且仍然拥有自己的组件：

<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">

  <li [ngbNavItem]="1">
    <a ngbNavLink>One</a>
    <ng-template ngbNavContent>
      <tab-section-1></tab-section-1>
    </ng-template>
  </li>

  <li [ngbNavItem]="2">
    <a ngbNavLink>Two</a>
    <ng-template ngbNavContent>
      <tab-section-2></tab-section-2>
    </ng-template>
  </li>
</ul>