如何使用帶有子組件的 Ng-Bootstrap Nav 作為選項卡？

Question

我正在使用來自Angular Bootstrap的導航組件，它的使用方式如下（來自官方示例）：

// 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>

但是在同一個文件中包含大量內容會使其冗長且混亂，因此我想將 Nav 選項卡放在子組件中。 我已經嘗試過了，但它不起作用：

// 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>

但它不起作用:(

在選項卡之間進行更改非常有效，甚至顯示了選項卡標題。 但是選項卡內容沒有被渲染，很可能是因為它是<ng-template>並且由另一個 div 中的 ng-bootstrap 渲染。

我已經四處尋找，但一無所獲！ 謝謝⭐

Answer 1

結構略有不同，但您可以嘗試為ng-template中的內容創建組件。 這樣您就不會破壞 Nav 功能並且仍然擁有自己的組件：

<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>