如何使用ngbTabSet将nav-pills置于card-header、tab-content置于card-body？

我明白你的需求——想要把导航标签（nav-pills）放在卡片头部（card-header），而标签内容放在卡片主体（card-body）里，默认的ngb-tabset确实会把标签和内容封装在一起，导致所有内容都挤在card-header里。下面是针对你使用的Bootstrap 4、ng-bootstrap 2.0和Angular 5.2环境的解决方案：

核心思路 #

我们需要手动拆分标签导航和内容区域：在card-header里自定义nav-pills导航栏，通过双向绑定activeId来同步ngb-tabset的激活状态，让ngb-tabset只负责管理card-body里的内容切换逻辑。

步骤1：组件类定义标签数据 #

在你的组件.ts文件中添加标签的配置信息和激活状态变量：

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab-card',
  templateUrl: './tab-card.component.html'
})
export class TabCardComponent {
  // 定义标签配置
  tabs = [
    { id: 'home', title: 'Home', content: '这里是Home标签的内容' },
    { id: 'profile', title: 'Profile', content: '这里是Profile标签的内容' },
    { id: 'contact', title: 'Contact', content: '这里是Contact标签的内容' }
  ];
  // 默认激活的标签ID
  activeTabId = 'home';
}

步骤2：模板文件实现布局 #

在组件的html文件中，将导航栏放在card-header，内容区域放在card-body，通过activeTabId同步状态：

<div class="card">
  <div class="card-header">
    <!-- 自定义nav-pills导航栏 -->
    <ul class="nav nav-pills" role="tablist">
      <li class="nav-item" *ngFor="let tab of tabs">
        <a 
          class="nav-link" 
          [class.active]="activeTabId === tab.id"
          (click)="activeTabId = tab.id"
          role="tab"
          aria-selected="{{activeTabId === tab.id}}"
        >
          {{ tab.title }}
        </a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <!-- ngb-tabset负责内容切换 -->
    <ngb-tabset [(activeId)]="activeTabId" [destroyOnHide]="false">
      <ngb-tab *ngFor="let tab of tabs" [id]="tab.id">
        <ng-template ngbTabContent>
          {{ tab.content }}
          <!-- 这里可以替换成你自己的内容模板，比如引用组件或模板引用 -->
          <!-- <ng-container *ngTemplateOutlet="yourTemplateRef"></ng-container> -->
        </ng-template>
      </ngb-tab>
    </ngb-tabset>
  </div>
</div>

关键细节说明 #

• [(activeId)]="activeTabId"：双向绑定激活状态，点击导航栏的标签时会同步更新ngb-tabset的激活标签，反之亦然。
• [class.active]="activeTabId === tab.id"：手动控制导航标签的激活样式，和Bootstrap的nav-pills样式兼容。
• [destroyOnHide]="false"：可选配置，默认情况下ng-bootstrap会销毁隐藏的tab内容，如果你希望保留隐藏内容的状态，可以添加这个属性。

这样就能完美实现你想要的效果：导航标签在card-header，内容在card-body，同时保留ng-bootstrap的tab切换逻辑和Bootstrap的样式。

内容的提问来源于stack exchange，提问作者Raphael