如何在未使用NG Bootstrap的Angular项目中正确使用Bootstrap tab？

Tab功能失效、两个面板同时显示，核心是三个问题：

• HTML结构不符合Bootstrap Tab组件的规范，缺少必须的容器类，类名挂载位置错误
• Bootstrap的交互依赖自身JS逻辑，属性名不匹配时不会触发，且Angular会默认拦截锚点链接跳转，导致原生绑定事件不生效
• 代码存在HTML语法错误，row标签上多写了一个双引号

具体错误点：

1. active类错误挂载在外层li.nav-item上，Bootstrap要求激活状态类需要加在a.nav-link和对应内容面板上
2. 内容区缺少必须的tab-content外层容器、tab-pane面板类，没有默认隐藏非激活面板的样式，自然会同时展示
3. Bootstrap 5版本的组件触发属性统一加了bs前缀，旧的data-toggle="tab"不会被识别；如果是Bootstrap 4版本，还需要按顺序引入jQuery、Popper、Bootstrap JS才能让交互生效
4. href="#xxx"的锚点写法会被Angular路由拦截，点击后不会触发Tab切换逻辑

1. 确认依赖配置正确 #

打开项目根目录的angular.json，找到对应项目的build.scripts配置项，按你用的Bootstrap版本引入对应JS文件：

• Bootstrap 5：直接引入node_modules/bootstrap/dist/js/bootstrap.bundle.min.js即可，不需要额外依赖
• Bootstrap 4：按顺序引入jquery.min.js、popper.min.js、bootstrap.min.js三个文件
  同时确认build.styles里已经引入了Bootstrap的CSS文件。

2. 修正HTML结构 #

直接替换成下面的代码，注意几个关键点：

• a标签用data-bs-target指定对应面板ID，href写javascript:void(0)避免路由拦截
• 内容区外层套tab-content容器，每个面板加tab-pane类，初始激活的面板加show active类
• 删除row标签上多余的双引号

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab1" aria-current="page" href="javascript:void(0)">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tab2" href="javascript:void(0)">Link</a>
  </li>
</ul>

<div class="row">
  <div class="tab-content col-lg-12">
    <div class="tab-pane fade show active" id="tab1" role="tabpanel">
      <div class="col-lg-4">
        <div class="card mb-4">
          <div class="card-body text-center">
            <h4>Tab 1</h4>
            <p>content</p>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-pane fade" id="tab2" role="tabpanel">
      <div class="col-lg-4">
        <div class="card mb-4">
          <div class="card-body text-center">
            <h4>Tab 2</h4>
            <p>Content</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如果你用的是Bootstrap 4，把代码里所有data-bs-toggle替换成data-toggle即可。

3. 动态内容场景兼容 #

如果你的Tab内容是动态生成、写完上面的代码还是点击失效，直接在对应组件的TS文件里手动初始化Tab实例即可：

import { Component, AfterViewInit } from '@angular/core';
// 导入Bootstrap的Tab模块
import { Tab } from 'bootstrap';

@Component({
  // 你的组件配置
})
export class YourComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 遍历所有Tab触发器手动初始化
    document.querySelectorAll('.nav-link').forEach(tabEl => {
      new Tab(tabEl);
    });
  }
}

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